Skip to main content

Understanding Icon Types

Each icon in the library belongs to one of three categories: Line, Shape, or Filled. The category determines which colour controls are available.

Line Icons​

Line icons are drawn with strokes only — no filled areas.

Available controls:

  • Stroke / Line Color

Example use: outline-style icons, minimalist designs, wireframe aesthetics.

Shape Icons​

Shape icons are solid filled areas with no stroke outlines.

Available controls:

  • Fill / Accent Color

Example use: solid icons, bold designs, single-colour icons.

Filled Icons​

Filled icons combine both strokes and fills. These icons have an outline and an interior accent colour.

Available controls:

  • Stroke / Line Color (the outline)
  • Fill / Accent Color (the interior)
  • Stroke Width

Example use: two-tone icons, duotone designs, icons with detail separation.

Filtering by Type​

In the icon picker, use the style tabs at the top to filter:

  • All — shows all 14,000+ icons
  • Filled — shows only Filled icons
  • Shape — shows only Shape icons
  • Line — shows only Line icons

This helps when you need a specific style to match your design.

Colour Inheritance​

The icon module uses CSS properties (stroke and fill) to colour the SVG. This means:

  • Colours support responsive breakpoints (different colours per device)
  • Colours support hover states (change colour on mouseover)
  • Colours support transitions (animate between states)

If a colour control appears greyed out, the selected icon does not use that colour channel.

Preserving Transparency​

Some icons have intentionally transparent areas (e.g., cutouts or negative space). These areas use fill="none" or stroke="none" in the SVG and are always preserved — your colour settings do not override them.