Icons communicate messages at a glance, and draw attention to important information. Obsidian uses the [Lucide](https://lucide.dev/) icon library, which includes more than 800 icons. You can find all available icons on their website. > [!important] Custom icons > If you want to create your own icons for Obsidian, you need to follow the [Icon Design Principles](https://lucide.dev/guide/design/icon-design-guide). You can find [templates and guides](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md) 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` |