Icon

ELMO uses a combination of Material Icons in Rounded style, and custom made icons designed in the Material style. Click on an icon below to copy the <IconName /> to your clipboard.

Import the icons you need from @eds/icon and use them in your components.

import { AddIcon } from '@eds/icon';

The icons accept an optional size prop that can be set to xsmall, small, medium or large. It defaults to medium if no size is specified.

Show codeCopy code

The icons accept any of the text colour tokens. It defaults to currentColor if no color is specified.

Show codeCopy code

If you need to create your own icon to get EDS icon styles, or you wish to pass your custom SVG icon to an EDS component that accepts an icon as a prop such as the <Button />, you can use the createIcon function.

This function takes two arguments, the SVG path and the name of the icon, and will return a new icon component with the EDS styles and optional size and color props.

NOTE: This is only recommended in cases where EDS doesn't provide the particular icon you need and there is consensus that no other apps would use it either.

Show codeCopy code