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.
Custom icons
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 |
Icon sizes
| 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 |