Styles

Three styles#

Every icon is one drawing whose parts know what they are, so switching style never shifts an icon.

• Outline: every part stroked. Light; right for dense interfaces.
• Duotone: shapes get a soft fill of the icon’s own colour, which deepens while the icon is active.
• Filled: shapes are solid and lines inside them are cut out. Icons made only of lines become a solid rounded tile with the lines cut out. Good for selected states and small sizes.

How it works#

Each part of an icon is a shape (a closed outline), a detail (a line inside a shape) or a line. Outline strokes them all; duotone tints the shapes; filled fills the shapes and cuts the details out, leaving a gap around any badge (a plus, a lock) so it stays separate.