How to customize Obsidian Callouts with your very own SVG icon created in Excalidraw

Obsidian callouts can be customized with your own SVG icons, and the most flexible workflow combines CSS snippets with either built-in Lucide icons, pasted SVGs from icon libraries, or custom-drawn icons exported from Excalidraw. The payoff is simple: a “memory” (or any other custom category) can get a distinct color and a tailored icon that matches your note-taking system.

Callouts in Obsidian are highlighted sections that carry both an icon and a color, and they can be folding (collapsed/expanded) for cleaner reading. Out of the box, Obsidian provides many callout types—note, abstract, info, tip, success, question, warning, failure, quote, example, bug, danger—often with aliases (for instance, “failure” can also be “fail” or “missing”). Creating a callout is done by writing a quote block and adding a bracketed keyword that starts with an exclamation mark; Obsidian recognizes the keyword and renders the corresponding callout styling.

For custom callout types, the key mechanism is a CSS snippet stored in the vault’s .obsidian/snippets folder. The snippet defines the new callout selector and assigns a color (typically an RGB value) plus an icon. The workflow starts with copying Obsidian’s help-provided template and replacing the callout type name and color. For icons, the easiest path is using Lucide icons, which are already supported by the CSS approach: insert the icon name (e.g., a Lucide “album” icon) into the snippet, then reload Obsidian to make the icon appear.

When Lucide doesn’t have the right look, the transcript shows two alternatives. First, icon libraries like Font Awesome can be used by copying the “SVG code” and pasting that SVG text directly into the CSS snippet (between quotes). Second—and the focus of the tutorial—icons can be created from scratch in Excalidraw. The process begins by drawing within a fixed-size boundary (commonly 512×512) using Excalidraw’s “set dimensions” automation script, keeping the design simple and preferably single-color for small readability.

After drawing, the SVG export settings matter: set svg padding to zero, export transparent backgrounds, and ensure the export uses light-mode colors so the icon’s strokes/fills come out as expected. The SVG is then saved into the vault, opened, and cleaned up. The transcript recommends svgOMG to reduce and simplify the SVG output, then further editing in a text editor to remove unnecessary parts like definitions and the outer rectangle.

The crucial styling step is making the icon inherit Obsidian’s callout color. That’s done by replacing hardcoded black (#000000) strokes with the CSS keyword currentColor, so the icon automatically adopts the color defined for the callout. If the icon includes other fixed colors (like a white heart), those can be swapped to CSS variables tied to the theme (e.g., text title h1 or text accent), letting the icon adapt across themes such as default Obsidian, Groov Box, and others.

In short: define a custom callout in CSS, attach an SVG icon, and use currentColor (plus optional theme variables) so the icon stays visually consistent as colors and themes change. The result is a memory callout (and any custom callout) that looks exactly the way the user wants—without needing traditional programming.