Skip to content

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.

We can change the fill to currentColor.

drizzle.svg
<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>

We load it locally and transform it.

uno.config.ts
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)'
},
},
}),
],
})

Now, we need to color it correctly depending on the theme and whether the link is active or not.

src/styles/custom.css
.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;
}

Dark mode:

Drizzle

Light mode:

Drizzle