Icon

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 fill prop is the second attribute and defaults currentcolor.

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

Usage

Import

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.

Props

Examples

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.