Icon

# 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 dimensions in TailwindCSS.

# Color

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

<x-moonshine::icon icon="heroicons.academic-cap" color="primary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="secondary"/>
<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="primary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="secondary"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-900"/>
<x-moonshine::icon icon="heroicons.academic-cap" color="dark-50"/>

There are several colors available by default, but you can expand them using your own color classes TailwindCSS.

# Customization

A custom style for icons can be set using 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 .