A plain line icon is perfect for a button. For a feature card, a dashboard tile or an app's home screen, you often want more: a coloured shape behind it, a soft shadow, a brand gradient. The Style tab does all of it, and every change shows on the stage at once.
Colour, size and stroke
Pick an icon, then open the Style tab on the right.
- Colour. Press a swatch, use the colour picker, or type a hex code like
#2563ebin the box. Paste your brand colour here so every icon matches. - Size. From 16 to 512 pixels. This is the size of the SVG and of the PNG at 1×.
- Stroke. For outline sets drawn with lines (Lucide, Tabler outline, Heroicons outline, Iconoir), set the line width from 0.5 to 4. Thinner looks elegant at large sizes; at 16 pixels, keep it at 2 or more so the icon does not fade.
Rotate and flip
Rotate turns the icon in 15-degree steps, from -180 to 180. Mirror flips it left to right, Upside down flips it top to bottom. Use these to turn one chevron into four directions, or to point a hand icon the other way, instead of hunting for another icon.
A background shape
Next to Back, choose a shape: none, square, rounded, squircle or circle. A squircle is the soft square of phone app icons. Once a shape is on, more settings open under it:
- Fill: Solid or Gradient, with its colour, or two colours and an Angle for a gradient.
- Padding: the space between the icon and the edge of the shape. Around 20 to 25% looks balanced for most icons.
- Border: press On, then pick its colour and width.
For a bright tile, pair a white icon with a strong fill. For a soft tile, use a pale version of your brand colour as the fill and the full colour for the icon.
A shadow
Under Shadow, choose None, Subtle, Card or Elevated. The shadow is drawn inside the SVG, so it travels with the icon into every format. Subtle suits icons on white cards; Elevated suits a large hero icon.
Check it on light and dark
Use the three round buttons at the left edge of the stage to see the icon on a transparent, light and dark background. A dark icon disappears on a dark page; an icon with a background shape works on both, which is one reason app icons have one.
Start over or keep the style
Reset at the end of the Presets row takes the icon back to its plain style; it is greyed out while the style is already plain. Pressed it by mistake? Undo in the message that appears brings your style back. If you like what you made, keep it as a preset: lesson 6 shows how one style gives a whole set of icons the same look.
Share the exact icon
The share button next to the icon's name copies a link that opens this icon in this style. Send it to a teammate, and they see exactly what you see.
Next: making it move.