Icon

This page explains how to use Marigold icons effectively. Icons enhance visual appeal and help draw users' attention. As a core element of the Marigold design system, they establish a consistent visual language across applications.

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

Anatomy

The <Icon> component consists of an SVG element that represents the icon.

Appearance

Usage

Icons are used to enhance the user interface by providing visual cues and improving the overall user experience. They can be used in buttons, links, or as standalone elements to represent actions, statuses, or concepts. Icons should be used sparingly and only when they add value to the user interface. They should be easily recognizable and convey their meaning clearly without the need for additional text.

Installation

The Marigold Icons are available as a package called @marigold/icons. You can use them in your project by installing the package and importing the icons you need.

# with npm
npm install @marigold/icons --save

# 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';

export default function MyComponent() {
  return <DesignTicket />;
}

You can also copy the SVG code directly from the Marigold Icons page, but we recommend using the package for better maintainability and consistency.

Icon size

You can change the size of the icon by using the size prop, you can set it to any valid CSS size value. It automatically sets the width and height of the SVG element.

import { DesignTicket } from '@marigold/icons';export default () => <DesignTicket size={40} />;

Customize icon

Icons are built on our own SVG component, which is based on the SVG standard. Meaning you can use all the attributes and properties that are available in the SVG standard.

Props

SVG

Related