Icons provide additional context to elements on the page.
Icon displays from a set of simple, square icons. Nebula includes a limited set which can be edited and expanded.
Icons should be paired with text, do not assume that the icon alone will be understood by everyone. On web it is recommended to use ems for icon sizes, so they should match the size of the text automatically (and responsively!). For responsive sizing on native the size should be set manually.
Use the theme to either override the default icons, or add to them. When customising icons, provide an IconBase, an svg component which accepts a ‘color’ prop used for any fills or strokes in the icon.
Icons cannot be “read” by screen readers so they should be paired them with text and considered as purely decorative.
- Always include text with icons. Use VisuallyHidden if necessary.
Icons will generally inherit the colour and size of their parent, but these can also be set manually.
Any custom icons should be added using the theme (explained above) but it is also possible to provide a custom IconBase directly if neccessary.
sizepreset only on web
colorpreset only on web