Watch How to customize Obsidian Callouts with your very own SVG icon created in Excalidraw on YouTube for the context for this Gist.
Created
September 10, 2025 08:42
-
-
Save zsviczian/43477cd1cbc44b5bffd94be1391e35d9 to your computer and use it in GitHub Desktop.
Obsidian custom callouts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .callout[data-callout="todo"] { | |
| --callout-color: 230, 20, 10; | |
| --callout-icon: lucide-lightbulb; | |
| } | |
| .callout[data-callout="interesting"] { | |
| --callout-color: 245, 209, 10; | |
| --callout-icon: lucide-lightbulb; | |
| } | |
| .callout[data-callout="takeaway"] { | |
| --callout-color: 252, 186, 5; | |
| --callout-icon: lucide-key-round; | |
| } | |
| .callout[data-callout="example"] { | |
| --callout-color: 87, 148, 159; | |
| --callout-icon: lucide-lightbulb; | |
| } | |
| .callout[data-callout="practice"] { | |
| --callout-color: 200, 200, 0; | |
| --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 64 64"><path d="M37 40H26l6 7zM39 60h10a4 4 0 0 0 0-8H15a2 2 0 0 1 0-4h10a1 1 0 0 0 0-2H15a4 4 0 0 0 0 8h34a2 2 0 0 1 0 4H39a1 1 0 0 0 0 2z"/><circle cx="-35" cy="-59" r="1" transform="scale(-1)"/><path d="M37 5v23a1 1 0 0 1-2 0V5h-6v23a1 1 0 0 1-2 0V5h-7v26a5 5 0 0 1 8 0 5 5 0 0 1 8 0 5 5 0 0 1 8 0V5z"/><path d="M37 4h7l1 1v27L33 48a1 1 0 0 1-2 0L19 32V5l1-1h7v2h-6v25l11 14 11-14V6h-6zm-2 0v2h-6V4z"/></svg>'; | |
| } | |
| .callout[data-callout="abstract"] { | |
| --callout-color: 50, 180, 150; | |
| --callout-icon: lucide-scan-eye; | |
| } | |
| .callout[data-callout="story"] { | |
| --callout-color: 200, 148, 159; | |
| --callout-icon: lucide-scroll-text; | |
| } | |
| .callout[data-callout="mastery"] { | |
| --callout-color: 250, 110, 180; | |
| --callout-icon: lucide-star; | |
| } | |
| .callout[data-callout="meta"] { | |
| --callout-color: 87, 148, 159; | |
| --callout-icon: lucide-layers; | |
| } | |
| .callout[data-callout="tweet"] { | |
| --callout-color: 26, 140, 216; | |
| --callout-icon: lucide-twitter; | |
| } | |
| .callout[data-callout="illustration"] { | |
| --callout-color: 0, 255, 0; | |
| --callout-icon: lucide-image; | |
| } | |
| .callout[data-callout="email"] { | |
| --callout-color: 52, 168, 83; | |
| --callout-icon: lucide-mail; | |
| } | |
| .callout[data-callout="disagreement"] { | |
| --callout-color: 255, 0, 0; | |
| --callout-icon: lucide-alert-octagon; | |
| } | |
| .callout[data-callout="excel"] { | |
| --callout-color: 46,125,50; | |
| --callout-icon: '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path style="fill:#ECEFF1;" d="M496,432.011H272c-8.832,0-16-7.168-16-16s0-311.168,0-320s7.168-16,16-16h224 c8.832,0,16,7.168,16,16v320C512,424.843,504.832,432.011,496,432.011z"/><g><path style="fill:#388E3C;" d="M336,176.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16 S344.832,176.011,336,176.011z"/><path style="fill:#388E3C;" d="M336,240.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16 S344.832,240.011,336,240.011z"/><path style="fill:#388E3C;" d="M336,304.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16 S344.832,304.011,336,304.011z"/><path style="fill:#388E3C;" d="M336,368.011h-64c-8.832,0-16-7.168-16-16s7.168-16,16-16h64c8.832,0,16,7.168,16,16 S344.832,368.011,336,368.011z"/><path style="fill:#388E3C;" d="M432,176.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16 S440.832,176.011,432,176.011z"/><path style="fill:#388E3C;" d="M432,240.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16 S440.832,240.011,432,240.011z"/><path style="fill:#388E3C;" d="M432,304.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16 S440.832,304.011,432,304.011z"/><path style="fill:#388E3C;" d="M432,368.011h-32c-8.832,0-16-7.168-16-16s7.168-16,16-16h32c8.832,0,16,7.168,16,16 S440.832,368.011,432,368.011z"/></g><path style="fill:#2E7D32;" d="M282.208,19.691c-3.648-3.04-8.544-4.352-13.152-3.392l-256,48C5.472,65.707,0,72.299,0,80.011v352 c0,7.68,5.472,14.304,13.056,15.712l256,48c0.96,0.192,1.952,0.288,2.944,0.288c3.712,0,7.328-1.28,10.208-3.68 c3.68-3.04,5.792-7.584,5.792-12.32v-448C288,27.243,285.888,22.731,282.208,19.691z"/><path style="fill:#FAFAFA;" d="M220.032,309.483l-50.592-57.824l51.168-65.792c5.44-6.976,4.16-17.024-2.784-22.464 c-6.944-5.44-16.992-4.16-22.464,2.784l-47.392,60.928l-39.936-45.632c-5.856-6.72-15.968-7.328-22.56-1.504 c-6.656,5.824-7.328,15.936-1.504,22.56l44,50.304L83.36,310.187c-5.44,6.976-4.16,17.024,2.784,22.464 c2.944,2.272,6.432,3.36,9.856,3.36c4.768,0,9.472-2.112,12.64-6.176l40.8-52.48l46.528,53.152 c3.168,3.648,7.584,5.504,12.032,5.504c3.744,0,7.488-1.312,10.528-3.968C225.184,326.219,225.856,316.107,220.032,309.483z"/></svg>' | |
| } | |
| .callout[data-callout="memory"] { | |
| --callout-color: 252, 186, 5; | |
| --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill-rule="evenodd" stroke-linecap="round"><path stroke-width="0" d="m260.484 427.38 128.48-.22 43.47 1.39 7.06 1.22 6.41 2.19 6.04 3.42 4.11 4.37 4.43 10.13.76 12.06-1.28 6.13-2.4 5.14-6.77 7.27-5.59 2.55-8.47 1.85-11.32.9-228.29-.04-47.97-1.36-12.42-1.17-18.6-3.37-12.88-4.47-9.64-5.55-8.88-6.61-8.43-7.88-6.78-9.1-9.37-20.1-2.41-10.23-.8-10.55-.7-185.39.41-108.08 1.83-19.92 3.37-14.59 4.52-11.14 5.58-8.99 6.53-8.19 7.42-7.58 8.36-6.3 9.43-5.1 10.62-3.94 12.05-2.46 13.34-1.06 60.52-.91 185.76-.15 32.75.96 8.92 1.54 7.24 2.31 5.93 2.95 4.97 3.96 4.36 5.36 6.77 14.43 4.06 20.57.94 14.39-1.58 238.24-1.44 10.29-2.54 8.36-3.35 6.9-8.7 10.15-5.33 3.2-6.05 1.86-24.11 3.17-116.35-1.23-106.14-.15-43.79.65-8.51.84-7.22 2.08-5.9 3.82-4.17 5.11-4.51 11.07-.03 10.57 4.2 9.85 7.84 8.28 11.32 5.88 14.79 1.51 108.13-1.09"/><path fill="none" stroke="currentColor" stroke-width="2" d="M260.484 427.38c23.75 0 111.6-.76 142.5 0 30.9.76 33.33.83 42.92 4.58 9.58 3.75 12.64 11.05 14.58 17.92 1.94 6.88 1.04 17.5-2.92 23.33-3.95 5.84-7.15 9.66-20.83 11.67-13.68 2.01-32.64.28-61.25.42-28.61.14-70.62.76-110.42.41-39.79-.34-98.61 1.25-128.33-2.5-29.72-3.75-37.57-10.48-50-20-12.43-9.51-19.93-23.4-24.58-37.08-4.66-13.68-2.78-26.74-3.34-45-.55-18.26.07-43.26 0-64.58s-.34-41.11-.41-63.34c-.07-22.22-.35-43.12 0-70 .34-26.87-1.6-68.89 2.08-91.25s10.69-31.94 20-42.91c9.31-10.98 20.83-18.41 35.83-22.92 15-4.51 34.66-3.47 54.17-4.17 19.51-.69 44.17 0 62.92 0s31.87.07 49.58 0c17.71-.07 39.17-.34 56.67-.41 17.5-.07 33.33-.42 48.33 0 15 .41 30.97-.35 41.67 2.5 10.69 2.84 16.94 6.32 22.5 14.58 5.55 8.26 8.89 18.54 10.83 35 1.94 16.46.76 45.9.83 63.75.07 17.85-.34 26.88-.41 43.33-.07 16.46.07 37.43 0 55.42-.07 17.99 0 35.76-.42 52.5-.42 16.74.69 35.69-2.08 47.92-2.78 12.22-8.06 20-14.59 25.41-6.52 5.42-15.62 5.7-24.58 7.09-8.96 1.39-10.42 1.25-29.17 1.25s-60.48-1.05-83.33-1.25c-22.85-.21-30.42 0-53.75 0s-65.14-.56-86.25 0c-21.11.55-31.25-.56-40.42 3.33-9.16 3.89-12.84 13.26-14.58 20-1.74 6.74.28 14.65 4.17 20.42 3.89 5.76 10.62 11.59 19.16 14.16 8.54 2.57 20.21 1.04 32.09 1.25 11.87.21 24.02.14 39.16 0 15.14-.14 43.06-.69 51.67-.83m0 0c23.75 0 111.6-.76 142.5 0 30.9.76 33.33.83 42.92 4.58 9.58 3.75 12.64 11.05 14.58 17.92 1.94 6.88 1.04 17.5-2.92 23.33-3.95 5.84-7.15 9.66-20.83 11.67-13.68 2.01-32.64.28-61.25.42-28.61.14-70.62.76-110.42.41-39.79-.34-98.61 1.25-128.33-2.5-29.72-3.75-37.57-10.48-50-20-12.43-9.51-19.93-23.4-24.58-37.08-4.66-13.68-2.78-26.74-3.34-45-.55-18.26.07-43.26 0-64.58s-.34-41.11-.41-63.34c-.07-22.22-.35-43.12 0-70 .34-26.87-1.6-68.89 2.08-91.25s10.69-31.94 20-42.91c9.31-10.98 20.83-18.41 35.83-22.92 15-4.51 34.66-3.47 54.17-4.17 19.51-.69 44.17 0 62.92 0s31.87.07 49.58 0c17.71-.07 39.17-.34 56.67-.41 17.5-.07 33.33-.42 48.33 0 15 .41 30.97-.35 41.67 2.5 10.69 2.84 16.94 6.32 22.5 14.58 5.55 8.26 8.89 18.54 10.83 35 1.94 16.46.76 45.9.83 63.75.07 17.85-.34 26.88-.41 43.33-.07 16.46.07 37.43 0 55.42-.07 17.99 0 35.76-.42 52.5-.42 16.74.69 35.69-2.08 47.92-2.78 12.22-8.06 20-14.59 25.41-6.52 5.42-15.62 5.7-24.58 7.09-8.96 1.39-10.42 1.25-29.17 1.25s-60.48-1.05-83.33-1.25c-22.85-.21-30.42 0-53.75 0s-65.14-.56-86.25 0c-21.11.55-31.25-.56-40.42 3.33-9.16 3.89-12.84 13.26-14.58 20-1.74 6.74.28 14.65 4.17 20.42 3.89 5.76 10.62 11.59 19.16 14.16 8.54 2.57 20.21 1.04 32.09 1.25 11.87.21 24.02.14 39.16 0 15.14-.14 43.06-.69 51.67-.83"/></g><g stroke-linecap="round"><path stroke-width="0" d="m417.564 346.13 23.36.6 3 1.8 1.79 2.99.6 4.19v79.17l-.6 4.19-1.79 3-3 1.79-4.19.6-23.36-.6-2.99-1.79-1.8-3-.6-4.19v-79.17l.6-4.19 1.8-2.99 2.99-1.8 4.19-.6"/><path fill="none" stroke="currentColor" stroke-width="2" d="M417.564 346.13h19.17m-19.17 0h19.17m0 0c6.39 0 9.58 3.19 9.58 9.58m-9.58-9.58c6.39 0 9.58 3.19 9.58 9.58m0 0v79.17m0-79.17v79.17m0 0c0 6.39-3.19 9.58-9.58 9.58m9.58-9.58c0 6.39-3.19 9.58-9.58 9.58m0 0h-19.17m19.17 0h-19.17m0 0c-6.39 0-9.58-3.19-9.58-9.58m9.58 9.58c-6.39 0-9.58-3.19-9.58-9.58m0 0v-79.17m0 79.17v-79.17m0 0c0-6.39 3.19-9.58 9.58-9.58m-9.58 9.58c0-6.39 3.19-9.58 9.58-9.58"/></g><g fill-rule="evenodd" stroke-linecap="round"><path fill="var(--text-accent)" stroke-width="0" d="m274.619 286.469-42.37-40.19-36.31-36.38-13.65-16.88-4.13-6.59-4.74-11-1.46-9.45.09-9.45 1.87-10.07 4.34-9.78 5.76-8.83 6.14-7.19 6.62-5.36 7.54-3.88 15.45-4.19 14.68.3 13.69 4.11 6.28 3.69 18.56 16.55 1.27.39 12.96-11.95 9.5-6.68 12.38-4.41 13.75-1.83 14.29 2.22 13.19 5.13 9.95 7.54 7.48 9.48 5.24 10.35 2.41 12.46-.55 16.51-1.67 8.93-3.1 8.45-5.02 7.79-34.21 35.31-56.23 54.9"/><path fill="none" stroke="currentColor" stroke-width="4" d="M274.619 286.469c-14.45-14.31-69.63-64.23-86.72-85.89-17.1-21.66-16.23-30.73-15.85-44.05.37-13.32 10.15-27.66 18.11-35.87 7.95-8.22 19.94-11.93 29.61-13.43 9.66-1.5 20.04.83 28.37 4.41 8.33 3.57 17.26 13.62 21.61 17.05 4.35 3.44 2.75 3.88 4.5 3.58 1.74-.3 2.24-2.27 5.98-5.37 3.74-3.11 9.38-10.01 16.48-13.26s17.2-6.43 26.13-6.24c8.94.18 20 3.29 27.48 7.35 7.49 4.06 13.25 10.38 17.43 17.02 4.18 6.64 7.26 13.36 7.65 22.81.39 9.45-.08 23.27-5.32 33.89-5.24 10.62-17.09 20.22-26.13 29.83-9.04 9.62-16.54 16.49-28.09 27.85-11.56 11.37-34.37 33.6-41.24 40.32m0 0c-14.45-14.31-69.63-64.23-86.72-85.89-17.1-21.66-16.23-30.73-15.85-44.05.37-13.32 10.15-27.66 18.11-35.87 7.95-8.22 19.94-11.93 29.61-13.43 9.66-1.5 20.04.83 28.37 4.41 8.33 3.57 17.26 13.62 21.61 17.05 4.35 3.44 2.75 3.88 4.5 3.58 1.74-.3 2.24-2.27 5.98-5.37 3.74-3.11 9.38-10.01 16.48-13.26s17.2-6.43 26.13-6.24c8.94.18 20 3.29 27.48 7.35 7.49 4.06 13.25 10.38 17.43 17.02 4.18 6.64 7.26 13.36 7.65 22.81.39 9.45-.08 23.27-5.32 33.89-5.24 10.62-17.09 20.22-26.13 29.83-9.04 9.62-16.54 16.49-28.09 27.85-11.56 11.37-34.37 33.6-41.24 40.32"/></g></svg>'; | |
| } | |
| .callout[data-callout="definition"], | |
| .callout[data-callout="def"] { | |
| --callout-color: 165, 252, 3; | |
| --callout-icon: lucide-info; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment