Skip to content
heyrav design system
FoundationsShipped

Iconography

Phosphor Regular, inlined as SVG. Sized in em so one rule fits a 12px label and an 18px button.

Show code
<svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg>

The rule

.icon{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em;}
Mono label Body text Button
Show code
<span class="label"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Mono label</span>
<span class="prose">Body text <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></span>
<a class="btn btn-primary" href="#">Button <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></a>

Rules

  • Fetch the real path, never hand-write it: curl -sL https://raw.githubusercontent.com/phosphor-icons/core/main/assets/regular/<name>.svg
  • Parents are usually inline-flex, which drops the whitespace between icon and label - add gap (10px body, 6px mono).
  • → in a range (2022 → 2023) is prose, not an icon. Metrics use a capital X, not ×.
  • Decorative icons get aria-hidden="true"; an icon-only button gets aria-label.
  • Optical centring beats box centring: the play triangle moves back 0.037em because its box sits right of its centroid.