Have you tried copying and pasting the syntax from my original example above. It already has the correct syntax.
Your latest update fixed the space between .tile and .hyperlink but it looks like a new error was introduced. There should be a space after .tile.hyperlink and the .icon
Again, the original post had valid syntax that you could highlight and copy.
I tried:
.tile.hyperlink .icon {
font-size: 150%;
position: relative;
top: -50%;
}
but nothing happen…
That looks right. Do you have other Custom CSS that might be interfering with it? It might help to see your complete Custom CSS for that theme.
Moving the icons up 50% would move them off the tile, so the effect would be pretty noticeable…
That’s all I have,
All works , but Icon position. My icon is a JPG picture which I uploaded and increased .
.tile.news-feed .main-content { font-size: 1.5em; }
.tile.clock .time { font-size: 5.7em; } .date { font-size: 2em; }
.tile.day-of-month .header span {font-size:2.5em!important; position: relative; top:-0.3em}
.tile.calendar.agenda .main-content { font-size: 1.75em; }
.tile.news-feed .main-content .article-date { font-size: 1.25em; }
.tile.--theme-style-supertile .icon {
-webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0)drop-shadow(0 0 20px #ff0);
filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow)drop-shadow(0 0 20px yellow);
}
.tile.--theme-style-Notes {box-shadow: 5px 5px 7px rgba(33,33,33,.7); transform: rotate(-10deg); font-family: cursive; color: #000 !important; background: #ffc !important; z-index: 1;}
.tile.--theme-style-Notes .main-content {font-size: 1.3em !important;}
.tile .icon svg {width: 60%; height: 60%;}
.tile .icon img {width: 70%; height: 70%;}
.tile.hyperlink
.icon {
font-size: 150%;
position: relative;
top: -50%;
}
Are you testing it with a Hyperlink tile?
That snippet is specifically for Hyperlink tiles. The .tile.hyperlink part indicates that it should only apply to hyperlink tiles. You would need to adjust accordingly if you wanted it to apply to other tile types. 
I mean that the snippet only applies to Hyperlink tiles. Not any other tile like Things, Variables, etc. It being a built-in icon versus a uploaded file image shouldn’t matter in this case since we are targeting the higher level .icon
As mentioned in my previous reply, it’s the combination of .tile.hyperlink in the CSS selector that does this.
Your existing CSS uses the same approach to limit the CSS to news feeds, clocks, and calendars.
If you can clarify what you are trying to accomplish, perhaps we can provide better guidance. Just a heads up that I am out of the office on vacation, so might not be able to respond immediately, but other community members might be able to help out in the meantime.
PS. You will want to make sure the selector is all on the same line as shown in my original snippet. The screenshot just made it look like it was on two lines since my browser developer tools squished things a little bit.
@josh ,
As mention above I’m trying the change the position of a File Type Icon.
I’m trying to move the icon a little bit down since it cover my header.
That’s not a type of tile though. What type of tile are you trying to use the file icon on?
This a Tile. The layout is Color Control Tile.
That explains why the snippet won’t work.
The snippet only applies to hyperlink tiles. As I mentioned in my previous reply, you have a variety of different types of css selectors in your theme.
All of the ones highlighted in yellow are targeting a particular tile type. In other words, the CSS with those only applies to a particular tile type / layout.
The ones highlighted in blue are targeting specific named styles and only apply to tiles that use that particular named style.
The ones in red don’t have any subselector, so they apply to the icons of ALL tiles.
You would need to adjust the snippet according to your needs. Are you trying to apply the style to ALL tiles, all Color Control tiles, or just a particular tile (eg. With a specific named style)?
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:
How to target specific tiles using named styles/* 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.
