- Icon Monks
- Guides
- Choosing a weight
How to choose an icon weight
Match the icon weight to its size and its job. Regular suits most 24 px interface icons, bold holds up at 16 px, thin and light suit large display sizes, fill marks a selected state, and duotone adds depth to illustrations and empty states.
The six weights at a glance
| Weight | Stroke on the 256 grid | Best size | Use it for |
|---|---|---|---|
| Thin | 8 units | 48 px and up | Large, quiet display icons and hero art |
| Light | 12 units | 32 px and up | Airy interfaces and marketing pages |
| Regular | 16 units | 20 to 24 px | The default for buttons, menus and lists |
| Bold | 24 units | 16 px and below | Small sizes, dense tables and busy screens |
| Fill | Solid | Any | Selected tabs, active states, toggles |
| Duotone | Outline over a 20% tint | 32 px and up | Illustrations, onboarding and empty states |
Pair outline and fill for states
A common pattern is regular for inactive items and fill for the active one, for example in a bottom navigation bar. Because every weight shares the same shape, the switch reads as a state change rather than a different icon. The showcase uses exactly this.
Stay consistent
Pick one outline weight for a product and use it everywhere, then add fill for states and duotone for illustration. Mixing regular and bold outlines on one screen makes the interface look uneven.
Frequently asked questions
What is the default weight?
Regular, with a 16-unit stroke on the 256-unit grid, tuned for 24 px icons.
Which weights does the icon font include?
Thin, light, regular, bold and fill. Duotone needs two colors, so it is only in the SVG, React, Vue, web component and native packages.
Can I switch weight in code?
Yes. Pass weight="bold" in React, Vue and the web component, IconMonks.bold.heart in Flutter, weight: .bold in SwiftUI and IconMonks.Bold.Heart in Compose.
More guides
Last updated with version 0.4.3. Release notes