The set

In your product

These rules are for the screens that use Bloom, not for the icon files.

Labels and names

Give an icon a text label when its meaning is abstract or it starts a key action. When an icon stands alone, give it a name screen readers can read, such as aria-label on its button.

Touch targets

An icon you can press needs a target of at least 44px, and 48px suits a 24px icon. The icon stays small; the button around it grows.

Contrast

Keep at least 3:1 between an icon and its background (WCAG 1.4.11). For icons with small details, or that read like text, aim for 4.5:1. The secondary parts of a duotone icon must never carry the meaning alone: the icon has to read in one tone.

Selected states

Show selection by switching from Linear to Bold. The outline stays the same, so nothing shifts.

Next to text

Match the icon’s size and weight to the text beside it and center it on the line.

Large sizes and dark backgrounds

A 24 drawing scaled up grows heavy: at 32px or more, lower the stroke-width of the line styles a little. Light icons on a dark background also look heavier, and the same small reduction evens them out.

Right-to-left screens

Some icons may be mirrored for right-to-left reading and some must be drawn again. Bloom does not mark which is which yet. That mark will go into icons.json when a project needs it.