We use icons to draw attention to specific actions in our products.
1. Icon sizes
We use 2 icon sizes: Medium (24x24px) & Small (16x16px).
2. Icon colors
Colors are usually inherited from the text color paired with the icon. However, if you need to use a standalone icon, it’s good to use it with colors from these design tokens:
3. How to use icons
Tip: Don't use icons without a proper label. This creates confusion.
3.1 In Sketch
If you want to insert an icon into your Sketch, always use symbols starting with “Size: ” and then select the specific icon from the Overrides menu. It allows you to use color mask correctly.
3.2 In the React environment
To implement Icon component into your project you need to know its name. You can find it in the list of all icons. Then just add an import of the icon:
import Airplane from "@kiwicom/orbit-components/lib/icons/Airplane";
After adding import into your project you can use it simply like:
Table below contains all types of the props available for icons in general.
||The optional className of Icon.|
||The color of the Icon.|
||The customColor of the Icon. See Functional specs|
||Optional prop for testing purposes.|
||The size of the Icon.|
||Adds prop adds
||Adds prop adds
- If you don't pass
colorprop to Icon, it will inherit color from parent container with
- If an icon is used standalone meaning it conveys information by itself use
ariaLabelto help screen readers understand the content.
- If an icon is marked or already labeled by surrounding content, use
ariaHiddento hide icon from screen readers.
3.3 In the mobile application
We have the icon font ready for use in mobile applications, copy the code of the icon you need and apply where necessary.
3.4 Outside of our code base
If you need to use our icons outside of our React environment or mobile apps, you have 2 ways of doing so.
- As SVG sprite
- Download the file with all the icons
- Use the name of the icon as a CSS class
- Just download any icon you need from the icon list below and use SVG
- Or download the whole icon set as a ZIP file
4. List of icons
Use CTRL/CMD+F to search icon by name or description.
5. Request for a new icon
Our icons are based on Material design icon guidelines. We’re using a few different icon packs from which we select the best possible icon for us.
Just select an icon that is best suited for you and contact @honza on Slack.