We use the Phosphor icon library created by Helena Zhang and Tobias Fried.
Sizes
Tiny: 14 px – 0.875 rem
Small: 16 px – 1 rem
Medium: 20 px – 1.25 rem
When choosing the appropriate icon size, match it with the font style of the associated label.
Caption → Small icon
Paragraph / Subheading → Medium icon
Colors
Maintaining a consistent color palette for icons creates a professional, cohesive product. Color establishes brand identity, supports accessibility (especially for users with color vision deficiencies), and makes the interface feel deliberate and well-organized. Beyond aesthetics, color also conveys semantic meaning in icons.
Standard palette:
Grey/900 Default Neutral icons in their normal state.
Grey/600 Muted
Used for secondary or de-emphasized icons. Not for interactive elements.
Blue/600 Primary
Active state or primary action icons.
White White
For icons placed on surfaces between 500–900 in the color system.
Green/600 Positive
Indicates success, confirmation, or “on” states for booleans.
Red/600 Negative
Used for destructive actions and error states.
Orange/400 Warning
Draws attention to warnings or cautionary states.
Purple/600 Accent
Highlights new or premium features. Use sparingly and never decoratively.
States
Default
Icons use the Phosphor Regular style (outline, 2px stroke at 32px size).
At Tiny (14px): 0.875px stroke
At Small (16px): 1px stroke
At Medium (20px): 1.25px stroke
Default: Regular
Active
Used when a parent component can be toggled (e.g. selected vs. unselected). Active icons apply the Phosphor Duotone style, adding a fill.
Usage guidelines
Icons should be used sparingly and only when they provide value to the user. They should be relevant to the function they represent and meaningful to the target audience.
Opposite states
For opposite states or intermediary states provide all variations. For example:
Preview on
Preview off
Accessibility
Labels
In general icons should be accompanied by a label. The following exceptions can be made with careful consideration:
1. Common, universally recognized icons: Certain icons, such as a magnifying glass for search, or a gear icon for settings, are widely recognized and understood by most users without the need for a label. 2. If a specific icon is used consistently across the product, such as using a checkmark for confirmation or an X for closing overlays, users may become familiar with the meaning of the icons and not require a label.
Alternative text
For functional icons that are not accompanied by a label, use alt text that describes the function of the icon when clicked. For example, the magnifying glass icon might have the following alt text:
<alt=”search”>
More info on writing good alt text.
How to add a new icon
Are you a Contentful employee?
Log in to Forma 36 via Okta and visit the Guidelines/Adding icons page.