| 1 | --- |
| 2 | relates: |
| 3 | - Iconify: https://iconify.design/ |
| 4 | - Icones: https://icones.js.org/ |
| 5 | - unplugin-icons: https://github.com/antfu/unplugin-icons |
| 6 | tags: [components] |
| 7 | description: | |
| 8 | Use icons from virtually all open-source icon sets directly in your markdown. |
| 9 | --- |
| 10 | |
| 11 | # Icons |
| 12 | |
| 13 | 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`](https://github.com/antfu/unplugin-icons) and [Iconify](https://iconify.design/). |
| 14 | |
| 15 | The naming follows [Iconify](https://iconify.design/)'s convention of `{collection-name}-{icon-name}`. For example: |
| 16 | |
| 17 | - `<mdi-account-circle />` - <mdi-account-circle /> from [Material Design Icons](https://github.com/Templarian/MaterialDesign) - [`@iconify-json/mdi`](https://npmjs.com/package/@iconify-json/mdi) |
| 18 | - `<carbon-badge />` - <carbon-badge /> from [Carbon](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) - [`@iconify-json/carbon`](https://npmjs.com/package/@iconify-json/carbon) |
| 19 | - `<uim-rocket />` - <uim-rocket /> from [Unicons Monochrome](https://github.com/Iconscout/unicons) - [`@iconify-json/uim`](https://npmjs.com/package/@iconify-json/uim) |
| 20 | - `<twemoji-cat-with-tears-of-joy />` - <twemoji-cat-with-tears-of-joy /> from [Twemoji](https://github.com/twitter/twemoji) - [`@iconify-json/twemoji`](https://npmjs.com/package/@iconify-json/twemoji) |
| 21 | - `<logos-vue />` - <logos-vue /> from [SVG Logos](https://github.com/gilbarbara/logos) - [`@iconify-json/logos`](https://npmjs.com/package/@iconify-json/logos) |
| 22 | - And much more... |
| 23 | |
| 24 | ::: code-group |
| 25 | |
| 26 | ```bash [pnpm] |
| 27 | pnpm add @iconify-json/[the-collection-you-want] |
| 28 | ``` |
| 29 | |
| 30 | ```bash [npm] |
| 31 | npm install @iconify-json/[the-collection-you-want] |
| 32 | ``` |
| 33 | |
| 34 | ```bash [yarn] |
| 35 | yarn add @iconify-json/[the-collection-you-want] |
| 36 | ``` |
| 37 | |
| 38 | ```bash [bun] |
| 39 | bun add @iconify-json/[the-collection-you-want] |
| 40 | ``` |
| 41 | |
| 42 | ```bash [deno] |
| 43 | deno add jsr:@iconify-json/[the-collection-you-want] |
| 44 | ``` |
| 45 | |
| 46 | ::: |
| 47 | |
| 48 | We use [Iconify](https://iconify.design) 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](https://materialdesignicons.com/), `@iconify-json/tabler` for [Tabler](https://tabler-icons.io/). You can refer to [Icônes](https://icones.js.org/) or [Iconify](https://icon-sets.iconify.design/) for all the collections available. |
| 49 | |
| 50 | ### Styling Icons |
| 51 | |
| 52 | You can style the icons just like other HTML elements. For example: |
| 53 | |
| 54 | ```html |
| 55 | <uim-rocket /> |
| 56 | <uim-rocket class="text-3xl text-red-400 mx-2" /> |
| 57 | <uim-rocket class="text-3xl text-orange-400 animate-ping" /> |
| 58 | ``` |
| 59 | |
| 60 | <uim-rocket /> |
| 61 | <uim-rocket class="text-3xl text-red-400 mx-2" /> |
| 62 | <uim-rocket class="text-3xl text-orange-400 animate-ping ml-2" /> |
| 63 |