Icons
Phosphor Regular, 1.5px stroke, drawn as a sprite. 62 of them ship with the system, at five sizes and four colours.
Using one
Icons live in one sprite so a page carries a single copy of each path. Reference a symbol by name and size it with a class, never with an attribute.
<svg class="lr-i" aria-hidden="true"><use href="#i-check"/></svg>
Sizes
| Size | Where | Colour |
|---|---|---|
| 16px | Inside a check chip | Charcoal |
| 20px | Social icons, rating stars | Ink, or orange for stars |
| 22px | Inside a tagline pill | Charcoal |
| 24px | Default, and controls | Ink, or white on a tile or photo |
| 38px | Inside an 86px tile | White |
16
20
22
24
38 on a tile
Labelling
An icon next to text is decoration: hide it. An icon that is the only thing in a control carries the meaning and needs a name.
<!-- beside a label --> <span class="lr-check"> <span class="lr-chip"><svg class="lr-i" aria-hidden="true"><use href="#i-check"/></svg></span> Unlimited invoices </span> <!-- alone in a control --> <button class="lr-btn" aria-label="Open menu"> <svg class="lr-i" aria-hidden="true"><use href="#i-list"/></svg> </button>
The set
Phosphor Regular, MIT licensed. Add more by dropping the SVG into assets/icons and rebuilding the sprite.
Rules
- Phosphor Regular only. No Fill, Bold or Duotone weights, no second icon family.
- No emoji anywhere in a Lario surface.
- Icons inherit
currentColor. Never give one a colour of its own, except a rating star. - Lime is allowed on a decorative line icon inside a stat card, nowhere else.