Default Obsidian Callout CSS Snippet

Hello guys, where i can find the default obsidian callout css snippet that i customize?

The CSS snippet will be located at /vault/.obsidian/snippets/snippets.css.

But it doesn’t exist by default (you must create it).

So - here is a simple way to CREATE your custom CSS snippet:

If you have any questions, feel free to ask :tropical_fish:

The basic callout construction is some thing like this:

.callout[data-callout="callout type"] {
--callout-color: some-color;
--callout-icon: lucide-icon;

The data-callout attribute refers to the type of callout. By default, Obsidian has an info callout, a to-do callout, an example callout, etc. You can use this attribute to target a specific callout (like [data-callout="info"]) or create your own custom callout that you can then type into a note like a regular callout.

--callout-icon draws from lucide’s collection of icons. You can view these icons at You may have to close the note and re-enter it several times to get the icon to change in preview view (it takes a while to load in sometimes). If you do change the icon, make sure you add lucide before the icon name (for example, lucide-pulse or lucide-check).

Or, if you want to target all callout types, you can use

.callout {


and put whatever you want in the brackets.


This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.