Customizing Icons
Let’s explore how to load a custom icon and customize it.
Here is the Drizzle logo as an example:
Let’s say we want to use this icon in the Sidebar.
The problem is that the icon is black by default.
Changing the SVG
Section titled “Changing the SVG”We can change the fill to currentColor
.
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M37.058 78.7296C38.9195 75.4813 37.7789 71.368 34.5104 69.5422C31.2419 67.7164 27.0832 68.8696 25.2218 72.1179L3.37059 110.248C1.50909 113.496 2.64969 117.61 5.91818 119.435C9.18668 121.261 13.3454 120.108 15.2068 116.86L37.058 78.7296Z" /> <path fill="currentColor" d="M84.157 49.4932C86.0185 46.2449 84.8779 42.1316 81.6094 40.3058C78.3409 38.4801 74.1822 39.6333 72.3208 42.8815L50.4696 81.0116C48.6081 84.2598 49.7487 88.3732 53.0172 90.1989C56.2857 92.0247 60.4444 90.8715 62.3058 87.6233L84.157 49.4932Z" /> <path fill="currentColor" d="M156.63 49.4946C158.491 46.2463 157.351 42.133 154.082 40.3072C150.814 38.4815 146.655 39.6346 144.793 42.8829L122.942 81.013C121.081 84.2612 122.221 88.3746 125.49 90.2003C128.758 92.0261 132.917 90.8729 134.778 87.6246L156.63 49.4946Z" /> <path fill="currentColor" d="M109.52 78.7296C111.381 75.4813 110.24 71.368 106.972 69.5422C103.703 67.7164 99.5448 68.8696 97.6833 72.1179L75.8321 110.248C73.9706 113.496 75.1112 117.61 78.3797 119.435C81.6482 121.261 85.8069 120.108 87.6684 116.86L109.52 78.7296Z" /></svg>
Loading the icon
Section titled “Loading the icon”We load it locally and transform it.
import fs from 'node:fs/promises'import { defineConfig, presetIcons } from 'unocss'import { presetStarlightIcons } from 'starlight-plugin-icons/uno'
export default defineConfig({ presets: [ presetStarlightIcons(), presetIcons({ collections: { icons: { drizzle: () => fs.readFile('./src/assets/drizzle.svg', 'utf-8'), }, }, extraProperties: { display: 'inline-block', 'vertical-align': 'middle' }, customizations: { iconCustomizer(collection, icon, props) { if (collection === 'icons' && icon === 'drizzle') props.transform = 'scale(0.8)' }, }, }), ],})
Customizing with CSS
Section titled “Customizing with CSS”Now, we need to color it correctly depending on the theme and whether the link is active or not.
.i-icons\:drizzle { color: #c5f74f !important;}
html[data-theme='light'] .i-icons\:drizzle { color: var(--sl-color-white) !important;}
a[aria-current='page'] > .i-icons\:drizzle { color: var(--sl-color-text-invert) !important;}
Result
Section titled “Result”Sidebar
Section titled “Sidebar”Dark mode:

Light mode:
