Skip to main content

Iconography

Prism does not ship a bespoke icon font. Components accept icon nodes as props — typically inline SVGs in a consistent line style — so a product can use the icon set it already owns. What Prism standardises is how icons behave, not which ones you draw.

The pattern​

The 20px and 24px sizes, currentColor inheritance, and labelling — shown live. (The example glyphs are from a common line-icon set, passed exactly as you would pass your own SVG nodes.)

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

Style​

  • Line, not fill. Icons are stroked at a consistent weight so they sit comfortably beside Atkinson body text. Reserve filled glyphs for the rare case where a solid shape carries meaning (a status dot, a rating star).
  • Two key sizes. 20px for inline and control icons, 24px for standalone and touch targets. Match the icon's optical weight to the text it accompanies.
  • currentColor. Icons inherit text color by default, so they re-skin and adapt to dark mode with no extra work.

How icons are passed​

Icons are React nodes, not a registry — pass whatever SVG your product owns:

<Button icon={<Search size={20} />}>Search</Button>
<IconButton aria-label="Delete"><Trash2 size={20} /></IconButton>

Placement​

  • Leading icons clarify an action; trailing icons usually indicate direction or external movement. Buttons accept icon and iconEnd for exactly this.
  • An icon-only control must still be labelled for assistive technology. IconButton requires an accessible label — there is no unlabeled path.

Rules​

  • Icons support text; they rarely replace it. An icon-only button is acceptable only when the action is universally understood (close, search) and the target is at least 44px.
  • Do not invent meaning. A novel icon that needs a legend is worse than a plain text label.
  • Keep one icon set per product. Mixing line weights and corner styles reads as a bug.