Icons

Slidev allows you to have access to virtually all open-source icon sets directly in your markdown after installing the corresponding package. Powered by unplugin-icons and Iconify.

The naming follows Iconify's convention of {collection-name}-{icon-name}. For example:

<mdi-account-circle /> - <mdi-account-circle /> from Material Design Icons - @iconify-json/mdi
<carbon-badge /> - <carbon-badge /> from Carbon - @iconify-json/carbon
<uim-rocket /> - <uim-rocket /> from Unicons Monochrome - @iconify-json/uim
<twemoji-cat-with-tears-of-joy /> - <twemoji-cat-with-tears-of-joy /> from Twemoji - @iconify-json/twemoji
<logos-vue /> - <logos-vue /> from SVG Logos - @iconify-json/logos
And much more...

::: code-group

bash

pnpm add @iconify-json/[the-collection-you-want]

bash

npm install @iconify-json/[the-collection-you-want]

bash

yarn add @iconify-json/[the-collection-you-want]

bash

bun add @iconify-json/[the-collection-you-want]

bash

deno add jsr:@iconify-json/[the-collection-you-want]

:::

We use Iconify as our data source of icons. You need to install the corresponding icon-set in dependencies by following the @iconify-json/* pattern. For example, @iconify-json/mdi for Material Design Icons, @iconify-json/tabler for Tabler. You can refer to Icônes or Iconify for all the collections available.

Styling Icons

You can style the icons just like other HTML elements. For example:

html

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

<uim-rocket /> <uim-rocket class="text-3xl text-red-400 mx-2" /> <uim-rocket class="text-3xl text-orange-400 animate-ping ml-2" />