Energy Icons

A free, open-source icon library for everyone, with deeper coverage for energy, climate and infrastructure.

View icons
Docs/Design principles

Design principles

Every icon is drawn twice, at two optical sizes. The masters are scaled proportionally and never redrawn in code.

Two optical masters

20 master20×20 · 1px stroke

Used for 12–28px (12, 14, 16, 18, 20, 24, 28).

48 master48×48 · 2px stroke

Used for 32–64px (32, 40, 48, 64).

Small icons need open counters and a light touch. Large icons need a heavier line to hold their presence. One drawing can’t do both, so each icon ships as a 20 master drawn with a 1px stroke and a 48 master drawn with a 2px stroke. Both are outlined to fills before export.

Two weights

Every master also comes in Bold, drawn with a 1.25px stroke at 20 and a 2.5px stroke at 48 using the same construction rules. Bold is a separate drawing, not a thicker stroke applied in code, and the scaling rule below picks its master in exactly the same way. Use <Icon weight="bold" /> or the Regular / Bold switch in the toolbar.

Regular
Bold

The scaling rule

Sizes below 32px use the 20 master. Sizes from 32px up use the 48 master. The chosen master is scaled through width and height only. Path data is never edited, strokes are never re-weighted, and non-scaling-stroke is never used. The breakpoint is OPTICAL_MASTER_BREAKPOINT in src/config/icons.ts.

12
20
14
20
16
20
18
20
20
20
24
20
28
20
32
48
40
48
48
48
64
48

Drawing rules

  • Full-frame viewBox: 0 0 20 20 and 0 0 48 48.
  • A single currentColor fill, so icons pick up the text colour and work in light and dark themes.
  • Outlined geometry with no live strokes, masks, raster images or embedded styles.
  • The SVG exported from Figma is the source of truth. Fixes are made in Figma and re-exported.