Icons
Icons from two Iconify sets, in the text, sized and coloured with CSS, and shown in steps.
Each :set:name: in the text shows as an icon. An icon has the height and
the colour of the text around it.
Icons
Any icon of an Iconify set, written :set:name:
1 / 5
Slide 1 of 5: Icons
The project of this deck has two icon sets: @iconify-json/lucide and
@iconify-json/logos. Without its set, an icon shows as its source text.
- Icons in the deck syntax tells how to write an icon.
- Icons in the Vite plugin reference tells how to add an icon set to a project of the CLI.
- Icons in the React reference tells how to
give icon sets to
<Deck>, and how to add your own icons.
Source
---
title: Icons
layout: cover
---
# :lucide:shapes: Icons
Any icon of an Iconify set, written `:set:name:`
---
# In the text
An icon is as tall as the text around it, and has its colour.
- :lucide:rocket: A list item starts with one
- A sentence has one :lucide:arrow-right: in the middle
- **:lucide:triangle-alert: Bold text** and [:lucide:link: a link](https://icon-sets.iconify.design) keep their colour
```md
- :lucide:rocket: A list item starts with one
```
<!-- notes
:lucide:mic: The icons are from `@iconify-json/lucide`, a dev dependency of
the project. The page gets only the icons that the deck uses.
-->
---
# Size and colour
An icon takes the size and the colour of its element, so a class is all it
needs:
<div class="reasons">
:lucide:zap:
<span class="accent">:lucide:heart:</span>
:lucide:sparkles:
</div>
```md
<span class="accent">:lucide:heart:</span>
```
```css
.reasons {
font-size: 3em;
}
```
---
layout: two-cols
---
# Sets with their own colours
:::left
The `logos` set draws each icon in its colours. Its icons don't change with
the text.
:logos:react: :logos:vitejs: :logos:typescript-icon: :logos:firefox:
:::
:::right
```md
:logos:react: :logos:vitejs:
```
Every set installs in the same way:
```sh
npm install --save-dev @iconify-json/logos
```
:::
---
# One at a time
Icons take steps like any other content.
<div class="reasons">
:lucide:pencil-line:
<!-- step -->
:lucide:arrow-right: :lucide:presentation:
<!-- step -->
:lucide:arrow-right: :lucide:party-popper:
</div>
<!-- notes
Write.
[step]
Present.
[step]
Celebrate.
-->
/* A row of large icons. An icon is as tall as the text of its element. */
.reasons {
display: flex;
gap: 0.5em;
margin: 0.2em 0 0.3em;
font-size: 3em;
line-height: 1;
}
.reasons p {
margin: 0;
}
/* An icon has the colour of its text. */
.accent {
color: var(--deck-accent);
}
/* The logos, larger than the text around them. */
[data-layout="two-cols"] svg[data-icon^="logos:"] {
height: 1.8em;
margin-right: 0.3em;
}
To present this deck from a clone of the repository, run this command in
the examples folder:
bun run dev icons