Skip to content
Kando Logo Kando

Icon Themes

banner

An icon theme is a set of icons which can be used for the menu items. Kando comes with a few icon themes pre-installed and you can easily add your own.

Built-in Icon Themes

Section titled “ Built-in Icon Themes”

icon-themes

Kando comes with a few icon themes pre-installed. You can select them in the icon picker in the menu editor. Here’s a list of the built-in icon themes:

  1. Simple Icons (Plain & Colored): A set of icons for popular brands.
  2. Material Symbols Rounded: An icon set for common actions and objects.
  3. Base64 / URL: This allows you to use any icon from the web or your local file system by providing a Base64-encoded string or a URL.
  4. Emojis: This allows you to use any emoji as an icon.
  5. Kando’s own icons: Kando comes with a few icons which are used per default for new menu items.

The Simple Icons, the Material Symbols, and Kando’s own icons are set up in such a way that they will change their color automatically based on the used menu theme. You can learn how to make your own icons behave like this further below!

Adding Your Own Icon Theme

Section titled “ Adding Your Own Icon Theme”

To add your own icons to Kando, follow these steps:

  1. Create an icon-theme directory for your icon theme inside the icon-themes directory. You can give it any name you like. Where this directory is located depends on your operating system:

    Terminal window
    %appdata%\kando\
    • Directorykando
      • Directoryicon-themes/ Put your theme folder in here.
        • Directorysome-icon-theme/ The name will be shown in the icon picker.
          • icon1.svg
          • icon2.svg
          • …
      • Directorymenu-themes/
        • …
      • Directorysound-themes/
        • …
      • config.json
      • menus.json

  2. Add your icons to the new directory. The icons can be in various formats, but we recommend using SVG files.

  3. Restart Kando. Icon themes are only loaded when Kando starts.

  4. Select your icon theme in the icon-theme dropdown in the icon picker in Kando’s menu editor.

    custom-icon-themes

Make Icon-Colors Adaptive

Section titled “Make Icon-Colors Adaptive”

Per default, SVG icons will be displayed in their original color. However, especially for monochrome icons, it is often desirable to change the color of the icons based on the menu theme.

The basic idea is to set the fill or stroke attributes of the shapes in your SVG files to currentColor. Usually, SVG files have a fixed color set for these (like fill="red" or stroke="#ff6677"), however, the special variable currentColor can be used instead.

This means, you will need to edit your SVG files and change the fill attribute of the shapes to currentColor. Here are some examples, the corresponding SVG code is shown in the tabs below the images.

ImageNameExplanation
red.svgThis is how most SVG files will look like by default. The fill attribute is set to a fixed color (in this case, red). This means the icon will always be red, regardless of the menu theme. You can change the color theme of this website to see that the icon does not change its color.
current.svgIf you use currentColor as the value for the fill attribute, the icon will ba adaptive! Try changing the color theme of this website! The icon will switch between light and dark colors automatically.
mixed.svgYou can also mix adaptive and fixed colors in your SVG files. In this example, the fill color will adapt to the menu theme, while the stroke color will always be red.
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
   width="150" height="150" viewBox="0 0 256 256" version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
   <g>
     <path
       style="fill:red"
       d="M 93.175781 21.878906 A 37.714935 37.714935 0 0 0 56.533203 48.351562 A 37.714935 37.714935 0 0 0 81.296875 95.589844 A 37.714935 37.714935 0 0 0 128.53711 70.826172 A 37.714935 37.714935 0 0 0 103.77344 23.585938 A 37.714935 37.714935 0 0 0 93.175781 21.878906 z M 182.66016 35.625 A 37.714935 37.714935 0 0 0 144.94531 73.339844 A 37.714935 37.714935 0 0 0 182.66016 111.05469 A 37.714935 37.714935 0 0 0 220.375 73.339844 A 37.714935 37.714935 0 0 0 182.66016 35.625 z M 54.578125 101.62695 A 37.714935 37.714935 0 0 0 21.8125 116.89844 A 37.714935 37.714935 0 0 0 29.8125 169.63281 A 37.714935 37.714935 0 0 0 82.544922 161.63281 A 37.714935 37.714935 0 0 0 74.546875 108.90039 A 37.714935 37.714935 0 0 0 54.578125 101.62695 z M 195.74805 125.76172 A 37.714935 37.714935 0 0 0 185.15039 127.46875 A 37.714935 37.714935 0 0 0 160.38477 174.70703 A 37.714935 37.714935 0 0 0 207.62305 199.47266 A 37.714935 37.714935 0 0 0 232.38867 152.23438 A 37.714935 37.714935 0 0 0 195.74805 125.76172 z M 114.24609 166.14648 A 37.714935 37.714935 0 0 0 94.267578 173.38867 A 37.714935 37.714935 0 0 0 86.193359 226.11133 A 37.714935 37.714935 0 0 0 138.91602 234.18555 A 37.714935 37.714935 0 0 0 146.99023 181.46289 A 37.714935 37.714935 0 0 0 114.24609 166.14648 z "
     />
   </g>
 </svg>

Suggested Icon Sets

Section titled “ Suggested Icon Sets”

There are many great icon sets available on the internet. Here are some which you could try:

  • Numix Circle: Just use the files from the Numix-Circle/48/apps directory.
  • Papirus: Here you could use the content from the Papirus/64x64 directory.
  • Tela: Here you find the icons in the src/scalable directory.
  • Pixelitos: Here you find the icons in the 16 directory.