Icons
Copy link to headline:Attention
Check out the whole icon palette in the resources documentation. Feel free to browse through all the assets there.
Our system icons are designed to be simple with a touch of detail. They are characteristic, yet easy to understand.
Copy link to headline:Grid and keylines
The square format with the 1px grid is the foundation for all of our system icons. This ensures the look of the set in terms of thickness, proportion, shape and weight are the same. The grid helps to design a unified set of icons and still be as flexible as possible.
Copy link to headline:Basic layout
The icons are created on a base grid of 32x32px and then reduced or enlarged to the appropriate size. The grid comes with a padding of 2px. The padding should only be exceeded if it is necessary to give additional visual weighting or if a certain element is required to give the icon its characteristic or meaning.
The keylines ensure a certain consistency in shape and proportion in the overall icon set. In exceptional cases and if the design of the icon does not allow otherwise, the design can go beyond the shape.
Copy link to headline:Stroke
The weighting of different icons should be the same as possible and should not look heavier or lighter. To make this possible, only a 2px stroke is used.
The distance between parallel strokes is at least 2px. There are a few exceptions which occurs when the icon is complex or has a certain density of line.
Copy link to headline:Angles
The basic angle is 45°. If necessary, the increments of 15° and 5° are the next steps.
Copy link to headline:Corners
Unified corner radius ensure the element is recognizable and in harmony with the set. 2px is the standard radius and can be increased in further steps of two.
Copy link to headline:Sizes
All icons are created as vector graphics and due to the base unit, the icons are limited to specific sizes.
The default size is 24x24px, but we also use a smaller and a larger variant based on the system patterns.
| Name | Size |
|---|---|
| 2xs | 12px square |
| xs | 16px square |
| sm | 24px square |
| md | 32px square |
| lg | 48px square |
| xl | 64px square |
| 2xl | 96px square |
For a full list of icons, please take a look at the icon resources.
Copy link to headline:Icons
onyx includes a set of well-crafted SVG icons that are free to use.
If you want to download the icons as SVG, please head over to our GitHub repository(opens in a new tab).
A full changelog can be found here.
Copy link to headline:Installation
To get started, install the npm package with your corresponding package manager:
Afterwards, you can import and use icons as needed. Please see the OnyxIcon(opens in a new tab) for the technical documentation.
Copy link to headline:Usage
There are two different ways of using / importing icons from this package:
Copy link to headline:Option 1: JavaScript import (recommended)
For the best developer experience, it is recommended to use JavaScript imports. This approach also supports IDE intellisense, so you can e.g. just start typing "icon" in your editor and all available icons will be suggested to you.
Copy link to headline:Option 2: Import from SVG file
Alternatively, you can import the icon from the raw SVG file:
Copy link to headline:Available icons
You can hover over an icon to see its name. Click on it or press enter when selecting it via keyboard to copy the import statement for the selected icon.