Component to render Icons.

On this page you can learn how Marigold Icons should be used. Icons itself can be used to improve visual interest and get users attention.

The size of the icon can be change via the size prop. The default size is 24px. The color of the icon refers to the property currentcolor.

For a full list of the available Icons go to the Marigold Icons.



Marigold Icons have a separate package to install. You have to install the package and use the Icons like other React components.

# with npm npm install @marigold/icons --save # with yarn yarn add @marigold/icons # with pnpm pnpm add @marigold/icons

To import a specific component you just have to use the name of the icon directly between the < /> brackets. E.g.:

import { DesignTicket } from '@marigold/icons';

Alternatively you can go to Marigold Icons and click on an Icon in the list to copy them as <svg> Element.


sizenumber24Size of the icon.
classNamestring-add classnames to the component.


Icon size

You can set the size of the icon as shown below.

Icon className property

To fill in the color you can use the className propery. You can also add other classNames.