Docs menu

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

StyleKindHow it is made
LinearStrokeStrokes 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 DuotoneStrokeThe 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.
OutlineFillEvery 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.
BoldFillClosed 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 DuotoneFillBold 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: 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. 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. The two styles share their outline, so nothing moves.