Font Icons and SVG Icon Packs #

Kustom’s Icon module allows you to easily add vector icons to your presets. You can use self-made traditional font packs or tap into the massive online library of SVG icons provided by Iconify.

IcoMoon Font Icon Packs #

This is the traditional method for creating custom icon packs for Kustom. You will combine a font file (.ttf) with a JSON file that maps names to specific characters in that font.

To create your own pack, follow these steps:

Go to the IcoMoon App site and create a new project.
Add the icons you want to include from their library or upload your own SVGs. Please pay attention to the license of any icons you use!
Once you have selected all your icons, press the Generate Font button at the bottom of the screen.
On the next screen, you can give each icon a unique name. This is the name you will use to select the icon in Kustom.
When you are ready, press the Download button.
From the downloaded ZIP file, you need two files:
- Copy the .ttf font file to Kustom/icons/myfontpack.ttf
- Copy the selection.json file to Kustom/icons/myfontpack.json
Crucially, ensure the .ttf and .json files have the exact same name (e.g., myfontpack.ttf and myfontpack.json).
Your pack is now ready to be used in Kustom!

TIP: To edit your IcoMoon project later, simply create a new project on their site, press “Import Icons”, and select the selection.json file you saved. This will restore your previous session.

Iconify SVG Icon Packs (New in v3.80) #

Starting with version 3.80, Kustom is integrated with Iconify, which offers over 200,000 vector icons across hundreds of popular open-source icon sets.

No Manual Downloads: Unlike IcoMoon packs, you do not need to download any files. Iconify packs are accessed directly from the Kustom icon picker.
Vast Library: You can browse and search the entire Iconify library from within the app.
SVG Power: These icons are loaded as native SVG data, which allows for per-path coloring and advanced effects.

Icon Color Modes #

When you add an icon (especially an SVG-based one from Iconify), you can change how its colors are handled using the “Filter” option.

Normal: The icon is rendered with its original, intended colors.
Monochrome: This mode converts the entire icon to your selected color while preserving shading. For example, if an icon has dark and light red parts, they will become dark and light shades of your chosen color (e.g., blue).
Colorize: This “stains” the icon with your selected color. White areas become your chosen color, black areas remain black, and other colors are blended accordingly.
Invert: This flips all the colors in the icon, similar to a photographic negative.

Advanced Usage: Formulas #

You can use formulas ($…$) to dynamically change the displayed icon. To use formulas you need to select the “icon” option and press the “formula” option.

Dynamic Icon Selection by Name: You can create a formula that outputs the name of an icon. This works for both IcoMoon and Iconify packs. The module will automatically find the icon with that name in the currently selected pack.
Example: Show a different battery icon based on charging status. $if(bi(charging), "battery-charging-full", "battery-full")$
Loading External SVGs via URL (Iconify Only): This powerful feature allows you to display any SVG icon from the web. When your item’s icon is set to an Iconify pack, if you use a formula that returns a web URL Kustom will download and render that icon instead of looking in the Iconify pack.
Example: Load an SVG icon directly from a URL. https://raw.githubusercontent.com/someuser/some-repo/main/icon.svg