Several of the UI components in the Obsidian API lets you configure an accompanying icon. You can choose from one of the built-in icons, or you can add your own.
## Browse available icons
Browse to [lucide.dev](https://lucide.dev/) to see all available icons and their corresponding names.
**Please note:** Only icons up to v0.171.0 are supported at this time.
## Use icons
If you'd like to use icons in your custom interfaces, use the [[setIcon|setIcon()]] utility function to add an icon to an [[HTML elements|HTML element]]. The following example adds icon to the status bar:
```ts
import { Plugin, setIcon } from "obsidian";
export default class ExamplePlugin extends Plugin {
async onload() {
const item = this.addStatusBarItem();
setIcon(item, "info");
}
}
```
To change the size of the icon, set the `--icon-size` [[Reference/CSS variables/Foundations/Icons|CSS variable]] on the element containing the icon using preset sizes:
```css
div {
--icon-size: var(--icon-size-m);
}
```
## Add your own icon
To add a custom icon for your plugin, use the [[addIcon|addIcon()]] utility:
```ts
import { addIcon, Plugin } from "obsidian";
export default class ExamplePlugin extends Plugin {
async onload() {
addIcon("circle", ``);
this.addRibbonIcon("circle", "Click me", () => {
console.log("Hello, you!");
});
}
}
```
`addIcon` takes two arguments:
1. A name to uniquely identify your icon.
2. The SVG content for the icon, without the surrounding `