Icon

Overview

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

Edit live code
<>
  <Icon name="caret-down" />
  <Icon name="caret-right" />
  <Icon name="chevron-left" />
  <Icon name="chevron-double-left" />
  <Icon name="chevron-right" />
  <Icon name="chevron-double-right" />
  <Icon name="chevron-up" />
  <Icon name="chevron-down" />
  <Icon name="cross" />
  <Icon name="check" />
  <Icon name="euro" />
  <Icon name="pound" />
  <Icon name="dollar" />
  <Icon name="new-window" />
  <Icon name="gas" />
  <Icon name="electricity" />
  <Icon name="link" />
  <Icon name="download" />
  <Icon name="plus" />
  <Icon name="minus" />
  <Icon name="calendar" />
  <Icon name="anytime" />
  <Icon name="evening-and-weekend" />
  <Icon name="heating" />
  <Icon name="interval" />
  <Icon name="smart" />
  <Icon name="shoulder" />
  <Icon name="solar" />
  <Icon name="peak" />
  <Icon name="offpeak" />
  <Icon name="info" />
  <Icon name="success" />
  <Icon name="error" />
  <Icon name="warning" />
</>
<>
  <Icon name="caret-down" />
  <Icon name="caret-right" />
  <Icon name="chevron-left" />
  <Icon name="chevron-double-left" />
  <Icon name="chevron-right" />
  <Icon name="chevron-double-right" />
  <Icon name="chevron-up" />
  <Icon name="chevron-down" />
  <Icon name="cross" />
  <Icon name="check" />
  <Icon name="euro" />
  <Icon name="pound" />
  <Icon name="dollar" />
  <Icon name="new-window" />
  <Icon name="gas" />
  <Icon name="electricity" />
  <Icon name="link" />
  <Icon name="download" />
  <Icon name="plus" />
  <Icon name="minus" />
  <Icon name="calendar" />
  <Icon name="anytime" />
  <Icon name="evening-and-weekend" />
  <Icon name="heating" />
  <Icon name="interval" />
  <Icon name="smart" />
  <Icon name="shoulder" />
  <Icon name="solar" />
  <Icon name="peak" />
  <Icon name="offpeak" />
  <Icon name="info" />
  <Icon name="success" />
  <Icon name="error" />
  <Icon name="warning" />
</>

Register icons

There are a set of icons which correspond to the timing categories of registers supported by Kaluza, which are part of the default set.

Note that 'interval' and 'smart' are the same icon, since smart meters in EU are known as 'interval' meters in the AP region.

Edit live code
<>
  <Icon name="anytime" />
  <Icon name="peak" />
  <Icon name="offpeak" />
  <Icon name="evening-and-weekend" />
  <Icon name="solar" />
  <Icon name="shoulder" />
  <Icon name="interval" />
  <Icon name="smart" />
  <Icon name="heating" />
</>
<>
  <Icon name="anytime" />
  <Icon name="peak" />
  <Icon name="offpeak" />
  <Icon name="evening-and-weekend" />
  <Icon name="solar" />
  <Icon name="shoulder" />
  <Icon name="interval" />
  <Icon name="smart" />
  <Icon name="heating" />
</>

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!).

Edit live code
<Heading3><Icon name="euro" /> Example</Heading3>
<Heading3><Icon name="euro" /> Example</Heading3>

Accessibility

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.

Variations

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

Custom colour

Edit live code
<Icon name="euro" color="#FF0000" />
<Icon name="euro" color="#FF0000" />

Custom size

Edit live code
<Icon name="euro" size={48} />
<Icon name="euro" size={48} />

Customising icons

You can override existing icons or add new icons by adding the IconProvider around your app:

import { IconProvider } from '@kaluza-platform/nebula';

const Tree = (props: JSX.IntrinsicElements['svg']) => (
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      ...
      fill="currentColor"
    />
</svg>
);

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);
import { IconProvider } from '@kaluza-platform/nebula';

const Tree = (props: JSX.IntrinsicElements['svg']) => (
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      ...
      fill="currentColor"
    />
</svg>
);

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);

You can also use an svg file directly:

import { IconProvider } from '@kaluza-platform/nebula';
import Tree from '../../svg/tree.svg';

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);
import { IconProvider } from '@kaluza-platform/nebula';
import Tree from '../../svg/tree.svg';

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);

Using Material UI icons (opens in new window)  takes a little mapping of their props to work with the Icon component.

import { IconProvider } from '@kaluza-platform/nebula';
import AccessAlarm from '@material-ui/icons/AccessAlarm';

const mapMaterialIcon = (Component: FunctionComponent) => ({
  color,
  width,
  style,
  ...rest
}: any) => <Component style={{ color, fontSize: width, ...style }} {...rest} />;

const Example = () => (
  <IconProvider icons={{
    alarm: mapMaterialIcon(AccessAlarm)
  }}>
    <Icon name="alarm" />
  </IconProvider>
)
import { IconProvider } from '@kaluza-platform/nebula';
import AccessAlarm from '@material-ui/icons/AccessAlarm';

const mapMaterialIcon = (Component: FunctionComponent) => ({
  color,
  width,
  style,
  ...rest
}: any) => <Component style={{ color, fontSize: width, ...style }} {...rest} />;

const Example = () => (
  <IconProvider icons={{
    alarm: mapMaterialIcon(AccessAlarm)
  }}>
    <Icon name="alarm" />
  </IconProvider>
)

Properties