The set
Styles
Each concept is drawn once, as Linear. The other four styles are computed from that drawing, so they share its size, position and visual center.
The five styles
| Style | Kind | How it is made |
|---|---|---|
| Linear | Stroke | Strokes of 1.5 with round caps and joins, and corners smoothed the way Figma does at 100%. They are real strokes, so you can change the weight. |
| Line Duotone | Stroke | The secondary parts sit in one group at 50% opacity; an icon that is one object tints its inside at 20% under its line. Still one color, in two levels. |
| Outline | Fill | Every stroke is turned into a shape and the shapes are merged into one fill. It looks like Linear at 1.5, with the weight fixed. |
| Bold | Fill | Closed shapes are filled out to Linear’s outer edge. Where shapes overlap, the one behind stands off by 1.5, and marked lines are cut out 1.5 wide. |
| Bold Duotone | Fill | Bold with the secondary parts at 50%. An icon that is one object fills at 50% inside its own line, and a cut line that runs over the other tone is drawn again in its own tone. |
Strokes and fills
Linear and Line Duotone are strokes: the files say stroke-width="1.5", and you can change it. Outline, Bold and Bold Duotone are fills, so their weight is fixed. Outline looks like Linear at 1.5; use it where only filled shapes are accepted.
Icons that are only lines
Some icons have no closed shape to fill, such as tray-arrow-down or link. In Bold they keep the 1.5 line. Material Symbols and SF Symbols fill the same way, and a thicker line would blur by half a pixel at 16px.
Duotone
Both duotone styles use one color. Parts that sit behind, such as a frame around a symbol, are at 50%. An icon that is a single object, such as a heart or a speech bubble, is never cut in two to make a second tone: its line stays in the main tone and its inside takes the second one, at 20% in Line Duotone and 50% in Bold Duotone, the way Phosphor tints a surface. An icon made only of open lines, such as a chevron, stays in one tone.
Showing a selected state
Switch from Linear to Bold to show that something is selected, as Apple and Fluent do with their outline and filled icons. The two styles share their outline, so nothing moves.