> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Icons

> Seven bundled icon libraries drawn as inline SVG, plus your own IcoMoon or Fontello sets.

**Bevel → Custom Elements → Custom Icons** has two panels: the icon libraries that ship with the Kit, and the sets you upload.

## Bundled libraries

| Library         | Prefix        |
| --------------- | ------------- |
| Bevel Icons     | `bevel-icon-` |
| Themify Icons   | `ti-`         |
| Phosphor Icons  | `ph-`         |
| Bootstrap Icons | `bi-`         |
| Lucide Icons    | `lu-`         |
| Feather Icons   | `fe-`         |
| Hero Icons      | `he-`         |

Each library that is switched on is a tab of the icon picker. On the site, icons are drawn as **inline SVG** from a path map, so no icon font is loaded for visitors. The switches are here under *In the picker* and, the same setting, under **Site Settings → General → Icon Libraries**. Turning a library off removes it from the picker; icons already placed keep rendering.

## Your own sets

Upload a zip from **IcoMoon** (pick icons, Generate Font, Download; the zip must include the font, not only the selection) or **Fontello** (pick icons, name the font, Download webfont). One set per zip. The set's name and CSS prefix are read from the zip and become a tab of the picker.

Each set lists its icon count and prefix, with **Browse** (a searchable grid; clicking an icon copies its class), **Rename** and **Delete**. Deleting a set stops the icons picked from it rendering.

Files live under `wp-content/uploads/bevel/icons/`. Sets travel with a [site kit export](/kit/tools#import-and-export) and keep their identity on import, so widgets that reference them keep working.