Customizing Icons

Bufferthemes use the Astro Icon package throughout the themes to load and embed Icons. Astro Icon support many Icon Sets out of the box via Iconify.

You can find general instructions for using Astro Icons in the Astro Icon documentation.

Add Icons

To add custom Icons you can add new .svg files inside the /src/icons directory. Those will be automatically accessible for the Astro Icon component. If you create a /src/icons/logo.svg file you can use it inside your .astro components like this:

---
import { Icon } from 'astro-icon/components'
---
<Icon name="logo" />

Add Icon Sets

Astro Icon integrates with Icon Sets supported by Iconify. To find all supported icon sets you can use:

• The official Iconify Icon Sets Explorer
• The popular Icônes app

After you have found an icon set you want to add to the theme you can install it via npm. To add the Material Design Icons you would run:

npm install @iconify-json/mdi

After the icon set is installed it can be used like this

---
import { Icon } from 'astro-icon/components'
---
<Icon name="mdi:account" />

To find the icon names it is highly recommended to use the official Iconify Icon Sets Explorer or the Icônes app.

Optimizing Deployment

If you use the server or hybrid output options you should take a look at the Astro Icon Guide to optimize the size of your Server Javascript Bundle