Icons

Icons are UI elements that express a single concept in ways people instantly understand. This guide uses Font Awesome 6 (fa-solid, fa-regular). Choose solid or regular styles based on recognition cues and context.

Icon library

Import Font Awesome in application CSS (already included in this style guide via @fortawesome/fontawesome-free). Use semantic icon names and keep sizes aligned to the tokens below.

Icon sizes

Size	Usage
16px	Inline with text, compact controls
20px	Buttons, menu items
24px	Toolbar actions, emphasis

Size specimens

16px

20px

24px

Solid vs regular

Solid (fa-solid) — faster recognition for physical objects; use when regular style creates narrow inner spacing.

Regular (fa-regular) — better when characteristic cues sit on outer edges (comment bubble, trash can, key).

When to use each style

Solid (`fa-solid`)	Regular (`fa-regular`)
Physical, real-world objects	Wide inner spacing in the shape
Highlight a particular color	Subtle cues along outer edges
Narrow inner spacing in outline version	Simple designs with no inner elements