Icon component

The <Icon> component allows you to access a set of pre-installed icon libraries and use them in your documentation.

Icon sets

The two icon sets supported are Lucide and Devicon.

Attributes

The <Icon> component accepts the following attributes.

Set

The set attribute specifies the icon set to use. It must be either lucide or devicon.

This is a required attribute.

Name

The name attribute specifies the name of the icon to use within the chosen set.

This is a required attribute.

Color

Specifying the color attribute will fill the icon with your theme's accent color.

Variant

You can also specify a plain or boxed variant. The latter will add some padding around your icon.

Defaults to plain. Can be combined with color.

Size

Finally, you can set a size of sm, md, lg, or xl (the default is md).

Class

You can add a custom CSS class to the icon using the class attribute. This is useful for applying custom styles to the icon.

<Icon set="lucide" name="dog" class="my-custom-css">