Icons
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 to see all available icons and their corresponding names.
Draw icons
If you'd like to use icons in your custom interfaces, use the setIcon
utility function to add an icon to an HTML element. The following example adds icon to the status bar:
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
CSS variable on the element containing the icon:
div {
--icon-size: 18px;
}
Add your own icon
To add a custom icon for your plugin, use the addIcon
utility:
import { addIcon, Plugin } from "obsidian";
export default class ExamplePlugin extends Plugin {
async onload() {
addIcon("circle", `<circle cx="50" cy="50" r="50" fill="currentColor" />`);
this.addRibbonIcon("circle", "Click me", () => {
console.log("Hello, you!");
});
}
}
addIcon
takes two arguments:
- A name to uniquely identify your icon.
- The SVG content for the icon, without the surrounding
<svg>
tag.
Note that your icon needs to fit within a 0 0 100 100
view box to be drawn properly.
After the call to addIcon
, you can use the icon just like any of the built-in icons.