14 · A custom 24 px set
Iconography
Heliodore icons share the same rounded stroke that invites a tap: no fill, 2 px, soft corners. Each state has its own shape so nothing depends on color alone.
Click an icon to see its code and copy it. Change the size and stroke weight to see how the set responds.
Download the SVG sprite (28 icons)
Construction
- Grid
- 24 × 24 px. Live area of 20 × 20 px with a 2 px margin.
- Stroke
- 2 px, always. Never 1 px or solid fills.
- Caps and joins
- Round. Sharp vertices only at the tip of a warning triangle.
- Corners
- 2 px radius on rectangles; circles are 18 px in diameter (radius 9).
- Optical weight
- Each icon fills 60 to 85% of the live area: narrower icons are centered, not enlarged.
- Color
- Inherits the text color (
currentColor). On Solar it is Crystal. - Sizes
- 16 px (inline with text), 24 px (standard), 32 and 48 px (empty states and covers).
Icons and states
Five distinct shapes, one per state. No state shares a silhouette with another.
Usage rules
Do
- An icon with meaning always has a visible label or an accessible name
- Use the same icon for the same idea throughout the app
- Align the icon with the first line of text, with 8 px of spacing
- Decorative icons with
aria-hidden="true"
Don't
- Icons alone for non-obvious actions (what does “⋯” do?)
- Red crosses, pharmacy crosses or caduceus symbols as decoration
- Mixing this set with icons of another style
- Changing an icon’s stroke weight to “make it stand out”