Now I got you… Sorry I’m not as smart as you when it comes to CSS…
I manage to fix and move the position of my icon. My solution is remove the Hyperlink and add img :
.tile .icon img {
font-size: 150%;
position: relative;
top: 10%;
}
and the icon move a little bit down, which is what I needed…
Reviving this thread. This addresses setting the tile size for all types of icons - user added and system. This is not ideal as I use the same styles for tiles that contain both types of tiles. I presume there is no way to know this is a custom tile? If so, it seems that by default the system is picking a base size for custom tiles that is smaller than built-in icons. I don’t suppose there is anyway to bump this up across the board? Thanks.
Can you clarify what you mean by this? Did you mean that you are using a SharpTools Custom Tile with Custom HTML? In the case of a Custom Tile, the rendering of the tile happens in its own sandboxed context and the developer of the Custom Tile is fully responsible for the layout and sizing of various elements within the Custom Tile.
Since it’s rendered in a sandbox, Custom CSS from the Dashboard level can’t reach inside the sandbox of the Custom Tile. But the Custom Tile itself could be modified with HTML or CSS as desired.
You can target both system icons and custom image icons as @GrooveENERGY_ca showed here.
While they showed targeting each of these icon types separately, CSS allows you to use comma separated list of selectors. So with Groove Energy’s example, if you wanted to apply the same adjustments to both types, it could be combined like:
/* All on one line */
.tile .icon svg, .tile .icon img { /* your adjustments here */ }
/* Or separated so it's easier to read */
.tile .icon svg,
.tile .icon img {
/* your adjustments here */
}
My bad. I thought one thing and wrote another. I should have said custom icon.
The solution above is to change the size of the image. But for some reason all custom icons display smaller than built-in icons. So if I change the size of the image on a custom icon then it impacts all images with that specific tile.
Now that I am typing this the obvious solution is to create two styles - one for custom icon and one for regular icon.
But any specific reason why custom icons appear smaller? Thanks.
If the same style / aspect ratio is used, they would appear the same size. 
For example, here’s three different icons side-by-side:
System • Custom Color • Custom SVG
In the first photo, it might not be immediately obvious, but the mower icon is effectively taking up the full width of the default space available to the icon… and the Tesla logo is taking up the full height.
I added the red dashed outline to the img/svg tag to show the available space for an icon and make it more apparent.
A critical point is that the mower image does not have any padding in the image itself – it fills the width available.
If I used an image that had padding rendered into the image itself, then the icon will appear smaller though the actual image is doing the same thing as before filling up the available height or width first depending on its aspect ratio. As such, you should make sure your uploaded images do not have any padding if you want them to take up the full space.
Got it. Very helpful. I have gone back through and altered the padding on my custom icons to get a more consistent sizing.
As an aside the custom icons screen shows a zoomed in version of the icon for some reason? Perhaps it could show the actual icon? Example:
which looks like this on the tile:
Follow-up on this - I have noticed that some custom icons appear lower in the tile. I think this is because I am using a custom style but I can’t figure out how to adjust this. The example below uses a system icon on the left and the custom icon on the right. Both are using the same style. I have included the style commands in case there is something there that is causing this to happen? Thanks.
/* Hide-Footer-Active and Hide-Footer-Inactive */
.tile.–theme-style-hide-footer-active .title { top:70%; font-size: 2em }
.tile.–theme-style-hide-footer-active .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.–theme-style-hide-footer-active .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile.–theme-style-hide-footer-inactive .title { top:70%; font-size: 2em }
.tile.–theme-style-hide-footer-inactive .value { position: absolute; top: -10%; font-weight: bold; font-size: 2.5em }
.tile.–theme-style-hide-footer-inactive .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
The first icon is affected by your CSS which is pulling the SVG icon up a bit.
The second icon is in the default position in the center of the tile.
See my reply from just a few days ago describing how you could target both system icons (svg) and uploaded images (img) in Custom CSS.
Thanks, I totally missed the svg vs img. Rock and roll.
