docs/obsidian-developer/Reference/CSS variables/Foundations/Icons.md

metadata

cssClass: reference

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