How to choose an icon style for your interface
A practical way to pick between stroke, solid and the other UIX Icons styles, based on text size, density and how much the icons need to stand out.
Every UIX icon comes in 15 styles on the same 24 px grid. That is a lot of choice, so here is how we would pick one for a product.
Start with your text
Icons sit next to words most of the time, so match the weight of the type around them. Thin and light strokes suit large, light headings and calm marketing pages. Regular stroke fits most body text at 14 to 16 px. Bold stroke holds up next to semibold labels and on busy screens.
Rounded or sharp
Rounded ends feel softer and friendlier. Sharp ends feel more precise and technical. Pick the one that matches the corners in your interface: if your buttons and cards have large radii, rounded icons will look at home.
When to use solid
Solid icons carry more visual weight than strokes. A common pattern is stroke for the default state and solid for the selected one, for example in a tab bar. Keep both from the same family so the shapes line up when the state changes.
Duotone, two-tone and bulk
These styles add a second tone. They work well in empty states, onboarding and feature lists, where an icon is a small illustration and not a control. In a dense toolbar they tend to add noise.
Gradient, glass and tile
These are for moments that should stand out: a hero, a pricing card, an app grid. Use them sparingly, and keep plain strokes for the controls people click every day.
A simple rule
- Pick one stroke weight for the whole product.
- Use solid for selected and active states.
- Keep the decorative styles for a few places that need attention.
The free styles are Regular Rounded, Regular Sharp and Solid, all MIT. Try them in the icon browser first, then look at the other styles when you need them.