Guidelines
For guidelines on how to use the icons, see the icon component.
Icon colors
You can usually have icons inherit their color from the surrounding text. If you need a standalone icon, select from a status color or one of our icon colors:
Icon Primary
#252A31
rgba(37, 42, 49, 1)
colorIconPrimary
Icon Secondary
#4F5E71
rgba(79, 94, 113, 1)
colorIconSecondary
Icon Tertiary
#BAC7D5
rgba(186, 199, 213, 1)
colorIconTertiary
Using icons
In Figma
All of our icons are included in our ”[Orbit] Icons” Figma library (internal users only).
In React
In mobile apps
We have an icon font ready for use in mobile apps. Copy the code of the icon you need and apply where necessary.
Outside our codebase
If you need to use our icons outside of our React environment or mobile apps, you have 3 options.
- Find the icon you want in the list below and download the SVG or copy its source.
- Download the entire icon set as a ZIP file.
- Download a PNG file for any icon through the Orbit icon CDN.