Icon

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

Sections
- Basics
- Size
- Color
- Customization

# Basics

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

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

<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"/>

<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"/>

<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

<x-moonshine::icon
    size="10"
    icon="heroicons.academic-cap"
    class="bg-green-500 text-white rounded-full p-2"
/>

<x-moonshine::icon
    size="10"
    icon="heroicons.academic-cap"
    class="bg-green-500 text-white rounded-full p-2"
/>

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