You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# Basics

To insert icons into your custom elements, you can use the moonshine::icon component

<x-moonshine::icon icon="heroicons.academic-cap"/>

All available icons

# Size

Using the size parameter, you can set the size of the icon.

<x-moonshine::icon icon="heroicons.academic-cap" size="16"/>

The value of the size parameter corresponds to the sizes in tailwindcss

# Color

Using the color parameter, you can set the color of the icon

<x-moonshine::icon icon="heroicons.academic-cap" color="purple"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="pink"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-900"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-50"/>

Several colors are available by default, but you can expand them using your own color classes tailwindcss

# Customization

An arbitrary style for icons can be set via the class parameter

class="bg-green-500 text-white rounded-full p-2"

Build MoonShine contains a limited list of tailwindcss classes, use custom styles