Custom callout icons no longer showing

I have created a few custom callouts with SVG icons defined. They were showing up the other day, but no longer. I did just re-download Obsidian, but I was previously up-to-date.

Current version: 1.4.9(Installer version: v1.4.5)

I tested updated some of my icons to a ‘lucid’ icon, but they still do not appear. The issue persists across multiple themes and in the ‘Default’ theme.

Here is the last CSS I tested:

.callout[data-callout="startup"], .callout[data-callout="wakeup"], .callout[data-callout="coffee"] {
    --callout-color: 245, 209, 10;
    --callout-icon: '<svg xmlns="" height="1em" viewBox="0 0 512 512"> ... trimmed for brevity ... </svg>';

.callout[data-callout="meeze"] {
    --callout-color: 26, 140, 216;
    --callout-icon: lucid-alert-circle;

.callout[data-callout="reminder"] {
    --callout-color: var(--ctp-teal);
    --callout-icon: 'lucid-alert-circle';

I would suspect a small typo in one of your CSS snippets, which renders other parts inactive.

To find these there are a few options:

  • if using some version tracking on this files, try going back to where it starts working again and then look at what you added after that
  • try an online css linter to check for errors
  • have a custom CSS line which triggers something very visible, and move it section by section from the top until it doesn’t apply any more
  • divide and conquer the file by commenting/ editing or various parts until you find the offending section

Note that searching for bugs/issues in CSS files can be a little tricky due to reload issues, as well as the issue you’re looking for. Due to this I often tend to keep switching the background color of some element, just to make sure that my other changes are also picked up.

Hope this helps, and you locate your error.

Thank you for the tips.

Unfortunately I’ve gone through the process of disabling my theme, all other snippets, and all plugins. The problem persists. The same snippets worked just the other day. The only thing I’ve done that could possibly alter my configuration in some way is reinstall Obsidian. It’s weird.

Maybe a useful bit of info…

I overrode the ‘todo’ callout in my snippets, attempting to give it a custom icon, and the icon disappeared as well.

I can’t check the first set (svg is clipped) but “meeze” and “reminder” are working for me with some alteration. Yes, it seems a typo. Try lucide- and no quotes.

.callout[data-callout="meeze"] {
    --callout-color: 26, 140, 216;
    --callout-icon: lucide-alert-circle;

.callout[data-callout="reminder"] {
    --callout-color: var(--ctp-teal);
    --callout-icon: lucide-alert-circle;

Remember to close/open the note or Reload app without saving after making callout icon changes. It’s one of the few instances where the CSS isn’t picked up immediately.

Thanks @ariehen. Are you on Windows?

I just noticed that this issue is appearing on my work Mac, but I do not have the problem on my Windows PC.

Also just confirmed it is not a problem in iOS.

I am only running into the issue on Mac. :frowning:

Oh interesting. Yes, I’m on Windows11 (Obsidian v1.4.11) now, but can check later and report back when I’m on my mac.

Using the adjusted callouts I posted above, all seems good on the mac as well (macOS 13.5.2, Obsidian v.1.4.11).

CleanShot 2023-09-12 at 18.20.54


In my original code block I had both an icon point to a lucid string with, and another without, quotes. Neither worked. But, now that you’ve suggested it… it works. :slight_smile:

I did run into issues getting the ‘lucid-coffee’ icon to show up, but it eventually started showing up after I swapped a different icon in and then swapped it back. Maybe it was a loading issue that just needed a little encouragement, or Obsidian hadn’t had enough coffee. :person_shrugging:

Thanks for checking into it!

Glad it’s sorted.

I mentioned, but be sure to close/open the note or reload Obsidian when changing callout icons. I always forget as I’m used to hitting save in my code editor and have the CSS take right away. :disappointed:

I’ve attempted all debugging steps and ruled out any issues with custom CSS. The actual problem lies in the fact that the SVG icons are not rendering at all.

Typically, there should be an svg.svg-icon element within the div.callout-icon :

However, as you can see, it’s empty:

For reference:

.callout[data-callout="htb"] {
    --callout-icon: '<svg width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns=""><path fill="#9fef00" d="M11.996 0a1.119 1.119 0 0 0-. 0 0 0-.236.05.907.907 0 0 0-.165.079L1.936 5.675a.889.889 0 0 0-.445.77v11.111a.889.889 0 0 0 .47.784l9.598 5.541.054.029v.002a.857.857 0 0 0 .083.035l.012.004c. 0 0 0 .296.015.683.683 0 0 0 .086-.015c.01 0 .011-.002.016-.004a.94.94 0 0 0 .085-.024l.012-.004a.882.882 0 0 0 .083-.035v-.002a1.086 1.086 0 0 0 .054-.029l9.599-5.541a.889.889 0 0 0 .469-.784V6.48l-.001-.026v-.008a.889.889 0 0 0-.312-.676l-.029-.024c0-.002-.01-.005-.01-.007a.899.899 0 0 0-.107-.07L12.453.127A.887.887 0 0 0 11.99 0zm.01 2.253c.072 0 . 3.774a.418.418 0 0 1 0 .724l-6.537 3.774a.418.418 0 0 1-.418 0L5.26 6.807a.418.418 0 0 1 0-.724l6.537-3.774a.42.42 0 0 1 .209-.056zm-8.08 6.458a.414.414 0 0 1 .215.057l6.524 3.766a.417.417 0 0 1 .208.361v7.533a.417.417 0 0 1-.626.361l-6.523-3.766a.417.417 0 0 1-.209-.362V9.13c0-.241.196-.414.41-.418zm16.16 0c. 0 0 1-.208.362l-6.524 3.766a.417.417 0 0 1-.626-.361v-7.533c0-.149.08-.286.209-.36l6.523-3.767a.415.415 0 0 1 .216-.057z"/></svg>';
.callout[data-callout="yt"] {
    --callout-icon: lucide-youtube;
.callout[data-callout="uro"] {
    --callout-icon: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns=""><path d="M44 12C46.5102 16.6874 47.6142 22.9906 46.5056 28.191C45.397 33.3913 42.4826 38.0311 38.279 41.2873C34.0755 44.5436 28.8546 46.206 23.5422 45.9796C18.2298 45.7533 13.1692 43.6528 9.25793 40.0508C5.34663 36.4487 2.83739 31.5779 2.17521 26.3021C1.51302 21.0262 2.74068 15.6864 5.64047 11.2295C8.54026 6.77254 12.9248 3.48661 18.0165 1.9544C23.1081 0.422195 28.5779 0.74273 33.4558 2.85916L29.1917 12.687C26.6363 11.5783 23.7709 11.4103 21.1035 12.213C18.4362 13.0157 16.1393 14.7371 14.6202 17.0719C13.1011 19.4067 12.4579 22.2041 12.8048 24.9679C13.1517 27.7317 14.4662 30.2834 16.5152 32.1704C18.5642 34.0574 21.2153 35.1577 23.9983 35.2763C26.7813 35.3949 29.5163 34.524 31.7184 32.8182C33.9205 31.1123 35.4473 28.6817 36.028 25.9574C36.6087 23.2331 36.2059 20.3912 34.8909 17.9356L44 12Z" fill="#fff"/><path d="M34.9 12H44L44.4 18L34.9 17.869V12Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M43 9.50001C43 10.0137 42.9484 10.5153 42.85 11H34V16.85C30.5767 16.1551 28 13.1284 28 9.50001C28 5.35787 31.3579 2.00001 35.5 2.00001C39.6422 2.00001 43 5.35787 43 9.50001ZM37 9.00001C38.1046 9.00001 39 8.10458 39 7.00001C39 5.89544 38.1046 5.00001 37 5.00001C35.8955 5.00001 35 5.89544 35 7.00001C35 8.10458 35.8955 9.00001 37 9.00001Z" fill="#fff"/></svg>';
.callout[data-callout="answer"] {
    --callout-icon: lucide-sparkle;
  • Windows Version 10.0.19045.3448
  • Obsidian v1.4.12

I’m curious whether you’re actually able to use <svg ...> directly there at all? Aren’t you supposed to refer to already predefined icons using the --callout-icon tag?

In some of my CSS related to custom checkboxes, I need to set the background in order to use custom svg. Do note that is related to task checkboxes, and not icons related to callouts.

Callouts - Obsidian Help



I’m on 1.4.13, Windows 11, and it is not working here. Tried restarting the app.

@jerrymk In your case, scroll-text is from Lucide v0.205.0. As far as I know, Obsidian’s latest icons available are from Lucide v0.114.0. See → Obsidian Change log.

There is a lot of confusion over this; I’ll submit a request to the help documentation callouts section. It should mention that not all icons on the Lucide site are available to use.

Sorry for a little sidetracking here, but unless there is and I haven’t found it, I think it would be really useful to have a help page we could link to showing the version of all included packages, i.e. lucide icons, mermaid, prism.js, mathjax, …

Yeah I see… lucide-alert-circle works, requires full reload though, which is already known.

Completely agree. I’ll have a dig through the feature requests to see if there’s anything there or they are detailed somewhere else.

1 Like

@holroy :smiley:

1 Like

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