Icons
Emphasize UI items, or provide space-saving access to functionality.
Basics
- Do not use icons for decoration. If you need a little more visual impact, consider spot illustrations.
- Icons should only be used for items that are clickable. If you can't click the icon, don't use it (unless it's disabled).
- The best icon is often a text label.
Icon sets
We use two icon sets. For most items, we use icons from Material Symbols. When necessary, we create our own custom icons and provide those in our custom Covalent Icons set.
- Covalent icons (custom set, below)
Anatomy
Each icon sits within a 24×24 pixel square.
They rarely fill this canvas, which is intentional. Since icons vary in thickness, we adjust their size on the canvas to make them look more like a set.
This also aligns everything without any extra effort. If the canvases line up, the icons line up.
cv-icon_anatomy
Color
An icon may be colored using any of the standard icon colors, or any of the foreground colors if representing a state such as an error or success.
Do not use other colors. If you need decorative color, consider using an avatar.
cv-icon_color
Usage
Functions
We've standardized which icons we use for various use cases. Preview shows the Material Symbols glyph at 24×24px where applicable.
| Use case | Preview | Icon handle | Icon set |
|---|---|---|---|
| Add | add | Material Symbols | |
| Close | close | Material Symbols | |
| Configure | settings_outlined | Material Symbols | |
| Create | add | Material Symbols | |
| Delete | delete_outlined | Material Symbols | |
| Favorite item | favorite_outlined | Material Symbols | |
| Favorited item | favorite | Material Symbols | |
| Filter | filter_list | Material Symbols | |
| Help | help_outlined | Material Symbols | |
| Info | info_outlined | Material Symbols | |
| Notifications (active) | notifications | Material Symbols | |
| Notifications (none) | notifications_none | Material Symbols | |
| Open in new tab/window | open_in_new | Material Symbols | |
| Save | — | Use a text button | — |
| Search | search | Material Symbols | |
| Settings (in-page elements like charts) | tune | Material Symbols | |
| Settings (section) | settings_outlined | Material Symbols | |
| Star item | star_outlined | Material Symbols | |
| Starred item | star | Material Symbols |
States
For giving opinionated feedback: error messages, loading, status indicators, and similar patterns. State icons use Covalent Icons (not Material Symbols); previews use the Covalent icon font where a glyph exists in the package.
| Use case | Preview | Icon handle | Icon set | Color |
|---|---|---|---|---|
| Cancelled | state_cancelled | Covalent Icons | on-surface-38 | |
| Caution/warning | state_caution | Covalent Icons | caution | |
| Changed | state_changed | Covalent Icons | on-surface-variant | |
| Error | state_error | Covalent Icons | negative | |
| Paused | state_paused | Covalent Icons | on-surface-variant | |
| Pending/waiting | — | state_pending | Covalent Icons | on-surface-variant |
| Running | — | Use cv-circular-progress | — | primary |
| Success | state_positive | Covalent Icons | positive |
Visualizations
Use these when toggling between different views of data—for example, switching from a bar chart to a line graph.
| Use case | Preview | Icon handle | Icon set |
|---|---|---|---|
| Visualization settings | tune | Material Symbols | |
| Bar chart | bar_chart_outlined | Material Symbols | |
| Bubble chart | bubble_chart_outlined | Material Symbols | |
| Card view | view_module_outlined | Material Symbols | |
| Line chart | show_chart_outlined | Material Symbols | |
| List or table | view_list_outlined | Material Symbols | |
| Text | short_text_outlined | Material Symbols |
Covalent icons
These are custom icons we've created to supplement the ones provided by Material Symbols.