swatch icon

Common uses

• Color picker trigger
• Design settings panel
• Theme selection

Use it in React

npm i @heroicons/react

import { SwatchIcon } from '@heroicons/react/24/outline';

<SwatchIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<SwatchIcon className="size-6" />

<SwatchIcon className="size-6" />

<SwatchIcon className="size-6" />

<SwatchIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

swatchcolorpalettepaintdesign

FAQ

What is the swatch icon used for?

It's typically used to indicate options related to color, design, or artistic tools.

How do I use the swatch icon in React?

Import it using `import { SwatchIcon } from '@heroicons/react/24/outline'` and then use it as a component: `<SwatchIcon />`.

What is the license for the Heroicons swatch icon?

The Heroicons library, including the swatch icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.