import { IconSearch } from "@/components/IconSearch" import { ComponentExample } from "@/components/ComponentExample" import { Prerequisites } from "docs-ui"

export const metadata = { title: Icons, }

{metadata.title}

In this guide, you'll learn how to install and use Medusa UI icons.

The Medusa UI icons package is a collection of React icon components from Medusa's design system. You can use these icons either in your Medusa Admin customizations, or in your standalone React projects.

Installation

The Medusa UI icons package is available by default in your Medusa application, so you can use them in your Medusa Admin customizations without any additional installation steps.

Installation in Standalone Projects

<Prerequisites items={[ { text: "React 16.8+ installed in your project.", link: "https://react.dev/", } ]} />

To install the Medusa UI icons package in your React-based project, run the following command:

npm install @medusajs/icons

Usage

You can import and use the icons in your React components:

import { Sun } from "@medusajs/icons"

export default function Component() {
  return (
    <Sun />
  )
}

Icons List

Below is a list of all the icons available in the Medusa UI design system. Click on any icon to copy its component name.

Icon Props

Icons accept all props that an svg element accepts.

Icon Color

By default, outline icons' stroke color and solid icon's fill color are set to currentColor.

You can set a different color by passing the color prop.

You can also use a CSS class by passing the className prop.

Icon Size

All icon's width and height are 20px and it's not possible to change them.