Sign Up

Icon component

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

The two icon sets supported at the moment are:


You can draw a variety of different icon styles.

Rendering a book icon
<Icon set="lucide" name="book" size="sm" variant="plain" />


To use an icon, you must specify the set and name attributes.

<Icon set="devicon" name="python" />

The above will render the Python logo:


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

<Icon set="devicon" name="rust" color />


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

<Icon set="devicon" name="javascript" variant="boxed" />


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

<Icon set="devicon" name="ruby" size="lg" />


The component accepts the following props as attributes.

setThe name of the icon set (lucide or devicon)yes
nameName of the icon in the setyes
sizesm, md (default), lg, or xlno
variantStyle of the icon. plain or boxedno
colorBoolean specifying black and white (default) or color iconno
classA custom CSS class to apply to the iconno

Was this page helpful?