Spaces:
Sleeping
Sleeping
| cssClass: reference | |
| 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` | | |