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
Icons
Interactive graph