Spaces:
Sleeping
Sleeping
File size: 1,987 Bytes
c63ff03 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
---
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` |
|