Kern 0.12.0 GitHub
Fundamentals

Icons

Kern draws its own glyphs (Lucide style: 16-px grid, 1.5 stroke, round caps). kern-icon follows font-size and currentColor.

<kern-icon name="wifi"></kern-icon> <!-- decorative --> <kern-icon name="power" label="Switched on"></kern-icon> <!-- announced -->

The names are exported as ICON_NAMES. Click a name to copy it.

Glyphs

sun
moon
copy
check
close
chevron-down
chevron-up
chevron-left
chevron-right
calendar
clock
minus
plus
star
more
menu
search
filter
settings
edit
trash
refresh
power
download
upload
link
lock
eye
eye-off
info
warn
wifi
inbox
home
bulb
thermometer
external

Brands

Brand icons start with brand- (also exported as BRAND_NAMES). They come from Simple Icons (CC0), are filled on a 24-px grid and use currentColor; brand-color shows the official colour. Check the contrast with it: some brand colours are near-black or white and disappear in one of the themes.

<kern-icon name="brand-home-assistant" label="Home Assistant"></kern-icon> <kern-icon name="brand-zigbee" brand-color label="Zigbee"></kern-icon>

The logos are trademarks of their owners: use them to refer to the product or service, not as your own branding, and follow the owners' guidelines. Microsoft, Z-Wave, Matter and Alexa were removed from Simple Icons at their owners' request and come from other sets: brand-microsoft and brand-z-wave from Material Design Icons (Apache 2.0), brand-matter from Material Symbols (Apache 2.0), brand-alexa from Bootstrap Icons (MIT). Thread, HomeKit and UniFi are not included (for UniFi use brand-ubiquiti); put your own SVG next to the text where you need them.

brand-home-assistant
brand-zigbee
brand-mqtt
brand-shelly
brand-tasmota
brand-esphome
brand-espressif
brand-node-red
brand-homebridge
brand-philips-hue
brand-ikea
brand-google-home
brand-bluetooth
brand-grafana
brand-influxdb
brand-docker
brand-proxmox
brand-raspberry-pi
brand-arduino
brand-linux
brand-debian
brand-ubuntu
brand-openwrt
brand-pi-hole
brand-ubiquiti
brand-synology
brand-tailscale
brand-wireguard
brand-cloudflare
brand-nextcloud
brand-plex
brand-github
brand-gitlab
brand-google
brand-apple
brand-android
brand-telegram
brand-signal
brand-whatsapp
brand-microsoft
brand-z-wave
brand-matter
brand-alexa

Flags

Country flags start with flag- and the ISO 3166 code (also exported as FLAG_NAMES). They come from flag-icons (MIT), are 4:3 and always in colour, with a hairline so white parts stay visible. Each flag is its own module: a page loads only the flags it shows. The selection covers the usual interface languages; kern-language-select uses them.

<kern-icon name="flag-ch" label="Switzerland"></kern-icon>

A flag stands for a country, not a language: English is spoken far beyond flag-gb. Next to a language name it helps recognition; on its own it should not be the only way to pick a language.

flag-ch
flag-li
flag-de
flag-at
flag-fr
flag-it
flag-gb
flag-us
flag-ie
flag-es
flag-pt
flag-nl
flag-be
flag-lu
flag-dk
flag-se
flag-no
flag-fi
flag-is
flag-pl
flag-cz
flag-sk
flag-hu
flag-si
flag-hr
flag-ro
flag-bg
flag-gr
flag-tr
flag-ua
flag-jp
flag-cn
flag-kr
flag-br