Skip to content

Icon

Icons provide additional context to elements on the page.

Overview

Icon displays from a set of simple, square icons. Nebula includes a limited set which can be edited and expanded.

Usage

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.

Example

Customising icons

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.

Accessibility

Icons cannot be “read” by screen readers so they should be paired them with text and considered as purely decorative.

Variations

Icons will generally inherit the colour and size of their parent, but these can also be set manually.

Custom colour

Custom size

Custom source

Any custom icons should be added using the theme (explained above) but it is also possible to provide a custom IconBase directly if neccessary.

Properties

NameValuesDefault

name

offcaret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

off

src

FunctionComponent

sizepreset only on web

NumberString

1em

colorpreset only on web

String

currentColor

...

JSX.IntrinsicElements["svg"]

Tokens