
For those who asked for waybar
Custom Icon Font for Waybar
My Waybar config is unlikely to work out of the box for you. It depends on a full set of shell scripts written for my specific environment. Once you understand the approach, though, you can adapt the same idea to your own setup.
Step 1: Build a custom icon font from SVGs
The first (and most important) step is to create application icons from SVG files you find online and compile them into your own icon font.
I used a small Python script with the fontTools package to do this, but you don’t have to. Plenty of GUI typography tools make the process easier if you prefer a visual workflow.
The figure shows the method I created two-color icons for waybar. I have 2 SVGs for the same icon, the first one is the background, pay attention to "advance 0", GTK will overlap the foreground on top without shifting.
I mapped the icons starting at U+100000 (Plane 16). This range is reserved for private use in Unicode, so it’s ideal for custom Waybar icons.
Step 2: Installation & CSS setup
- Place the resulting font file (waybar_icon_font.ttf) in:
~/.local/share/fonts/ - In ~/.config/waybar/style.css, set the font stack like this: CSS
font-family: "My Icons", "JetBrains Mono", "Font Awesome 7 Free";
Even though the custom font only contains a dozen or so icons, the full Nerd Fonts set (and Font Awesome) remain available as fallbacks.