Icons

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#

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

npm
yarn
pnpm

Usage#

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

Code
1import { Sun } from "@medusajs/icons"2
3export default function Component() {4  return (5    <Sun />6  )7}

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.