Icons communicate messages at a glance, and draw attention to important information.
Obsidian uses the Lucide icon library, which includes more than 800 icons. You can find all available icons on their website.
If you want to create your own icons for Obsidian, you need to follow the Icon Design Principles. You can find templates and guides for vector editors, such as Illustrator, Figma, and Inkscape.
Variable | Description |
---|---|
--icon-size |
Shorthand for icon width and length |
--icon-stroke |
Shorthand for icon stroke width |
--icon-color |
Icon color |
--icon-color-hover |
Icon color (hovered) |
--icon-color-active |
Icon color (active) |
--icon-color-focused |
Icon color (focused) |
--icon-opacity |
Icon opacity |
--icon-opacity-hover |
Icon opacity (hovered) |
--icon-opacity-active |
Icon opacity (active) |
--clickable-icon-radius |
Clickable icon button radius |
Variable | Default value |
---|---|
--icon-xs |
14px |
--icon-s |
16px |
--icon-m |
18px |
--icon-l |
18px |
--icon-xl |
32px |
--icon-xs-stroke-width |
2px |
--icon-s-stroke-width |
2px |
--icon-m-stroke-width |
1.75px |
--icon-l-stroke-width |
1.75px |
--icon-xl-stroke-width |
1.25px |