**Created**:: [[2022-07-30 Saturday]] **Link**:: https://youtu.be/tSSc42tCVto **Duration**:: 25:12  # Summary In this video, the speaker demonstrates how to create and customize SVG icons for callouts in Obsidian using Excalidraw. The process involves working with CSS snippets to define custom callouts and utilizing SVG for better visual representation. By the end of the tutorial, viewers will understand how to personalize their notes with unique icons tailored to their specific needs. # Key Takeaways - Learn how to create custom SVG icons for callouts in Obsidian using Excalidraw. - Understand the process of editing CSS snippets to customize callout types in Obsidian. - Discover how to simplify and clean SVG files for better integration into your notes. # Content Hey everyone, in today's video I'd like to show you how you can create custom SVG icons with Excalidraw in Obsidian. This is going to be a slightly more technical discussion, though there's not going to be any programming involved. But we are going to look at cascading style sheets (CSS) files, as well as the inner structure of an SVG document. So, there are going to be some technical parts to it, but I think if you have the patience, for sure you can also follow along and understand what's going on. [* ](https://youtu.be/tSSc42tCVto) To understand why we would want to do this in the first place, I wanted to talk about the callout types in Obsidian. This was introduced fairly recently, and I think it's a fantastic feature. So, let's first talk about what callouts are and then let's talk about custom callouts, how you can customize them, and then we'll dive into the SVG icon creation with Excalidraw. [* ](https://youtu.be/tSSc42tCVto) Callouts are these sections in your document that you can highlight with an icon and a color. You can even make them foldable, so this could be a folding note if I type a dash here and I type whatever title I want—like "Folding Note"—then this becomes a folding note with the details appearing when I open the note, and it can be hidden if I close the note. There are many pre-built callout types in Obsidian, such as note, abstract, info, tip, success, question, warning, failure, quote, example, bug, and danger. These are already there in the system. [* ](https://youtu.be/tSSc42tCVto) Many of them have different aliases, so "failure" can be "fail" or "missing," or "warning" can be "caution" or "attention." The way you create such a callout is you create a quote and then in brackets, you write the keyword starting with an exclamation mark. If this is recognized, then this will turn into a callout with some nice visualization. This is very useful if you want to highlight special sections of your document. [* ](https://youtu.be/tSSc42tCVto) You can also create custom callout types. There's a description in the Obsidian help on how to do this, so if you open up Obsidian and help, you can scroll down, and there's an explanation of how this should be done. What you need is you need to create a CSS snippet, and in that, you need to define your custom callout. I’ll show you in a second. [* ](https://youtu.be/tSSc42tCVto) You can see I created two custom callouts here: one is if I find something interesting, then I have my callout for "Interesting," and also, if I want to paste a tweet into my notes, then I have this custom callout for "Tweets." As I was reading Thiago's book, "Building a Second Brain," he talks about different things that you might want to take notes on in your second brain, and he mentions things like stories, insights, memories, reflections, musings, or some things from the outer world like highlights, quotes, and bookmarks, etc. I was thinking that these could be custom callout types as well. [* ](https://youtu.be/tSSc42tCVto) So today, we are going to create a custom callout for a memory—something that I want to remember. There are a couple of links down here, and we will use them one by one. First, let me open my CSS snippet for callouts. If you don't know where snippets are stored, the easiest way to get to them is to open the more options menu here and choose "Show in System Explorer." Wherever you are in your vault, you can open the document, and that will bring up System Explorer. In System Explorer, you can navigate to the root of your vault, so that is right here for me, and you need to look for the ".obsidian" folder. [* ](https://youtu.be/tSSc42tCVto) If you open this, you can see the snippets folder. In this folder, I have a number of different CSS snippets, but we are now looking at the "callouts.css" file. I'm using Notepad++ to edit these files; you can choose any other editor. So, what you see here are the two custom CSS snippets for my "Interesting" and "Tweet" callouts. You can see this is a very simple snippet; it is actually a copy-paste from what you can find in the help. I just simply copied this and then, of course, I replaced my callout type with my callout type. The color is an RGB color, and it's easy to get an RGB color if you type "Color Picker" into search; then Google brings up this color picker immediately, and you can choose a color—whatever color you like. [* ](https://youtu.be/tSSc42tCVto) Here, the first value is the RGB color; you just simply copy-paste this color, and that is what's placed right here. Obsidian includes a set of pre-built icons, and they are the Lucid icons. This is the link to the Lucid icons; I'm going to include this in the video description. Here, you can choose an icon of your desire. The way you include it in the CSS snippet is the following: Let’s say for the memory as the first step I want to use the album icon. This is a very simple solution. Now I come back to my CSS snippet. First of all, I'm going to make a copy of my tweet CSS snippet. I'm going to paste it here. I'm going to replace "tweet" with "memory" like this. I'm going to select a color here; I actually like this color, so this is going to be the color of a memory. I'm going to replace this value right here with the color of the memory. And here, instead of "lucid twitter," I'm going to write "lucid album." Like this, and I need to save the file, so I pressed Ctrl+S. [* ](https://youtu.be/tSSc42tCVto) Now if I come back to Obsidian, then you can see that the color has already changed, but the icon hasn't. You need to reload the page for the icon to appear, so I'm going to navigate back and forward. I just opened an empty document and came back, and you can see that now the icon has been loaded. This is the simple, quick solution: you look for an icon that's to your liking, and if it's a Lucid icon—so if you are able to find it here on the Lucid site—then bingo! It's so simple to insert that icon into your CSS, and then it will appear in your document. [* ](https://youtu.be/tSSc42tCVto) Now, imagine that you don't find an icon or you're not happy with how the memory icon looks like; that's the use case that we are going to be talking about right now. In that case, you can search the internet for other icons. For example, you can navigate to Font Awesome, and here there are plenty of icons to choose from. Depending on your license, you might only be able to access free icons, but if you like an icon here—let's say I like the Airbnb icon for my memory icon—then I click on the icon I like and I click "Copy SVG Code." So I copied the SVG code to the clipboard and I come back to my CSS snippet like this, and instead of the "lucid album," I'm going to paste the icon here. So I type this quote mark here for two quote marks; this is where my copied SVG will be inserted, and I simply press Ctrl+V to paste what I copied from the Font Awesome website. When I save this and I come back to my document, I navigate away from my page and then back, then you can see that the custom SVG icon was inserted. So this is great! If you didn't find a nice icon on Lucid, you can still look for icons elsewhere, for example, Font Awesome, and you can insert it this way by pasting the SVG text between single quotation marks or quote marks, and Obsidian will pick that icon up. [* ](https://youtu.be/tSSc42tCVto) If you don't like or cannot find a good icon on Font Awesome or anywhere else, you can create your own icon with Excalidraw, and we can also insert that icon here, so let me walk you through the process. There are a couple of things to pay attention to, but it is not that extremely difficult. So first of all, I'm going to open this page; I already created an empty document called "Memory Icon." I'm first going to draw a rectangle here, and I'm going to make this rectangle with a sharp edge, and I'm going to make it transparent. I'm also going to make sure that the sloppiness is "Architect," and the stroke width is the thinnest possible. I'm going to select this rectangle, and I'm going to choose the "Set Dimensions" Excalidraw automate script. You know that here if you click on this button, then you can install various scripts, and for example, I have the "Set Dimensions" script that's installed. Set Dimensions allows me to set a specific dimension for an object. So I'm going to select this rectangle, and I'm going to choose "Set Dimensions." [* ](https://youtu.be/tSSc42tCVto) I'm going to type in the dimensions; the first two values are the X and Y coordinates. I don't quite care about them, but I want an SVG icon that's 512 by 512. You can make it smaller as well—64 by 64 or 128 by 128 are typical icon sizes. I'm going for the 512 size right now; I click OK, and that has transformed my rectangle into this square with 512 size in both directions. I'm going to lock this item so it doesn't bother me as I work on this canvas. Now I'm going to cheat a little; I have already created my icon for memories—that's this book right here. This is a diary with a heart because I'm fond of the memories that I want to remember, so I'm going to drag this icon right here. The idea is you create an icon within this boundary set by your rectangle. I advise using few colors, as good icons typically have a single color, and in this case, I recommend using black. You will see later on what we will do with that color when we are done. [* ](https://youtu.be/tSSc42tCVto) So you're done with your icon. There's still a few things that you need to set. We will switch over to markdown view for this file, and we are going to add three front matter keys for Excalidraw to know what to do. So if I start typing "xcolor draw - svg padding," I want to export this icon with zero padding. The padding is important because if you have a curvy line, then it may not fit the rectangle that's being exported with the image, and therefore typically, the SVG export has this padding around it. In this case, I want to make sure that my exported image is exactly 512 by 512. Also, I want to export with a transparent background, so I'm going to set "xcalidraw export transparent true," and I also want to make sure that this export is in light mode or it's not in dark mode, that the colors are going to be black and white as I expect them. Of course, these are settings that you can find in the Excalidraw plugin settings, but this way, you can override these settings for a single document. So when I'm done with this, I open this in Excalidraw again and I simply choose the "Save SVG Into Vault" action. After that, I'm going to open the folder. Again, I'm clicking here, "Show in System Explorer." [* ](https://youtu.be/tSSc42tCVto) And let me bring up the window. With this, the SVG icon was created. Now, I'm going to pull this to the side. I'm going to bring up my Notepad++ editor, and I'm going to open this SVG icon. Here, you can see that this is a pretty long SVG icon with all sorts of stuff. I'll show you how to quickly clean up this icon so it looks more like this icon that we downloaded from Font Awesome. This is another link that I'm going to include in the video description: SVG OMG. It is a very useful tool. If you open the web page and you drop the SVG icon in here, you have a set of features that you can turn on to reduce the size of this icon. I pretty much clicked everything. The bit that I didn't click for example, "Removing the namespace," is because then the icon disappears; and the script elements? Well, I can turn that on, but actually that is not going to make it smaller. So you can see that this is a way to decrease the size of the icon, and now if I click "Download," then this downloads my icon. I'm going to open this icon now in Notepad++. It is not significantly shorter, but it has become somewhat shorter. Now there are still two things that we want to do. But let me first copy this icon into my CSS, so now I'm selecting this icon that I downloaded from SVG OMG and I'm just replacing this SVG from Font Awesome. So I'm deleting this and I'm pasting my own icon in here. I'm going to save this, and if I come back to Obsidian, I can already close this page right here; I don't need the image anymore. If I navigate forward and back, then actually this is already looking pretty good, so we could even stop at this point. I want to show some additional changes that you can make to make it even more cross-platform, if you will. [* ](https://youtu.be/tSSc42tCVto) Let me show you some things that we are going to be doing with this SVG. First of all, there are still some items here. So this is the definitions; I'm going to delete that—it's an unnecessary component. And then this path at the beginning, I can delete this because this is simply the thin line—the thin rectangle around my drawing. So you can see here, this is 512 by 512; I don't need this rectangle, so I'm going to delete the rectangle. I'm also going to replace the stroke color black with a stroke color that's the current color. So I'm going to choose "Search Replace" in Notepad++ and I'm going to replace all the blacks with the current color value. Current color is a special CSS value that represents the current drawing color wherever the icon is, so it inherits the color from the parent, and that will make sure that the icon follows the same color that you've set for the callout. So I'm going to replace all the blacks with the current color, and if I save this now, I come back to my document. [* ](https://youtu.be/tSSc42tCVto) I navigate away and then back from the document— not much has changed. But with "current color," now this is more proper. Now the only thing that we have still is, you can see that the heart is white, which is actually not bad. But if I would switch to light mode, so let me switch now my theme to light mode, then what you will see is well, it's still white. And in this setup, actually, not bad because the theme here is a bit yellowish. Let me change the theme to the default Obsidian theme like this and let me close it. Frankly, the white color is not bad, but you can see the Twitter and the light bulb have the background color of this line, and in my case, the heart is white, and this might be what you want. If you want to make that a different color, then I need to edit my SVG. Let me show you there. So we still have somewhere the white color in our SVG, so let's look for that. You can see here, I have the white color; I need to change this color to something different. You can choose the color; you can leave it white because we just saw that white is not so bad, or you can choose a CSS color. I'm going to press "Ctrl + Shift + I" or "Command + Shift + I" on Mac to bring up the developer console, and I click on the Elements here. [* ](https://youtu.be/tSSc42tCVto) I'm just clicking on the document so I get to the root of the document, and here on the right-hand side, under "Styles," you can scroll down to see all the colors that are used in the document. So if I want to apply the dark background color or something else, I can choose a color from here. For example, I could choose instead of white this to be, for example, "text normal" or I can choose this color, "text title h1," which is the first-level section color. You can see it's this color. The CSS for custom callout types, if I want to use this color, then I can come back to my CSS and I can replace the three F's with the following. I type "var" as this is a variable, I paste in the name of the variable and I close the parentheses. [* ](https://youtu.be/tSSc42tCVto) If I save my CSS now, I come back to Obsidian. I can close the developer console, navigate away and back from my page, and you can see that now my callout for memory has this red color. And if I now change my theme—let's say again I change back to the default Obsidian theme and I close this—then you will see this color didn't exist in the CSS. Maybe we will choose the text accent, and that is going to be available in both of them. So now I'm coming back to my CSS, I'm changing "text title h1" to "text accent." I'm saving this, I'm navigating back, closing the developer console, moving back and forward, and you can see that now I have a blue heart in memory. And if I choose my groove box theme, then let’s see what the accent color is. I think that’s an orange color if I’m not mistaken. So now I have an orange heart. So you can play with this. [* ](https://youtu.be/tSSc42tCVto) But maybe it's simplest to keep this white or to set the color in Excalidraw because whatever color you set here, that is the color that's being exported. So you also can play with the colors like this. So to recap, we created a custom SVG icon and we inserted that icon into a CSS snippet to create our own callout type for memory. We dove into a bit of how to do magic with SVG. The base story is to replace the black color, which is the hashtag zero zero zero; then you can see this is the stroke color. We replaced all of the occurrences of the stroke color with "current color," which is the default inherited color when an icon is inserted. But we also did some additional magic. We looked for a color variable for the heart, and so we changed the field color in this case, which was white (FFF), we changed it to this specific color. [* ](https://youtu.be/tSSc42tCVto) And also, to some extent, simplified the SVG file using the SVG OMG tool and downloading the modified SVG. I also removed some parts of the SVG; in particular, this first path I removed because that was the rectangle around my SVG, as well as I removed the definitions. Hopefully, this helps you find your way in using Excalidraw to create custom icons. In some cases, I do need custom icons because I cannot find one. I actually like this icon with this diary and the heart on it for memories. Of course, if I would want to go simple and wouldn't want to go through this process, then using the Lucid album is the easiest solution because that is built in, and we did it in the first few minutes of this video. I thought that this is helpful for you to understand how you can use Excalidraw to customize the look and feel of Obsidian, and I think it's just very powerful that you can create your own icons using Excalidraw with a few little tweaks. [* ](https://youtu.be/tSSc42tCVto) I hope you found this video helpful, and I hope to see you next time. Thank you! [* ](https://youtu.be/tSSc42tCVto) # YouTube Details ## YouTube Description #obsidianmd #excalidraw The video is about creating custom callouts in @obsdmd including designing your own icons with @excalidraw Starting from the basics I get increasingly technical especially beyond the 9 minute mark. I missed an important detail from the video. Seems I am suffering from knowledge blindness :( Before you can use your CSS snippet you need to 1) create the "custom-callouts.css" file in the snippets folder, 2) open Obsidian settings, 3) click on "Appearance", 4) scroll down to "CSS snippets", 5) click the refresh button for your new snippet to show in the list, and 6) enable your snippet for custom-callouts using the toggle button. --- [00:00](https://youtu.be/tSSc42tCVto?t=0) Intro [01:04](https://youtu.be/tSSc42tCVto?t=64) What are Obsidian callouts? [01:32](https://youtu.be/tSSc42tCVto?t=92) Pre-built callout types [02:23](https://youtu.be/tSSc42tCVto?t=143) Custom callout types [03:05](https://youtu.be/tSSc42tCVto?t=185) Custom callout ideas based on type of things you might want to note down mentioned in Tiago Forte's Building a Second Brain book [03:45](https://youtu.be/tSSc42tCVto?t=225) My CSS snippet for callouts (where it is stored, what's inside) [05:13](https://youtu.be/tSSc42tCVto?t=313) How to get an RGB color with Google [05:39](https://youtu.be/tSSc42tCVto?t=339) Pre-built (Lucid) icons included in Obsidian [05:57](https://youtu.be/tSSc42tCVto?t=357) Creating a simple custom callout using a pre-built icon and a custom color [07:39](https://youtu.be/tSSc42tCVto?t=459) Using an icon from FontAwesome [09:29](https://youtu.be/tSSc42tCVto?t=569) Drawing your own icon with Excalidraw [12:16](https://youtu.be/tSSc42tCVto?t=736) Exporting the icon to SVG from Excalidraw [13:57](https://youtu.be/tSSc42tCVto?t=837) Opening the exported SVG file [14:30](https://youtu.be/tSSc42tCVto?t=870) Clean up/compact the exported SVG with SVGOMG [15:37](https://youtu.be/tSSc42tCVto?t=937) Pasting the custom icon into my custom callout CSS snippet [16:27](https://youtu.be/tSSc42tCVto?t=987) Advanced SVG editing [22:43](https://youtu.be/tSSc42tCVto?t=1363) Recap ----- If you find my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt If you'd like to request a feature or report a bug, please raise it on GitHub: https://github.com/zsviczian/obsidian-excalidraw-plugin If you want to connect, you can reach me (@zsviczian) in the Obsidian Members Group (OMG) on Discord or on Twitter. Links --------- Excalidraw Plugin: https://github.com/zsviczian/obsidian-excalidraw-plugin Obsidian: https://obsidian.md Excalidraw: https://excalidraw.com My blog: https://zsolt.blog Obsidian callouts help: https://help.obsidian.md/How+to/Use+callouts Lucid icons: https://lucide.dev/ SVG OMG: https://jakearchibald.github.io/svgomg/ Color picker: https://g.co/kgs/sujdeJ Font Awesom: https://fontawesome.com/ ## YouTube Transcript [hey everyone in today's video i'd like](https://youtu.be/tSSc42tCVto?t=0) [to show you how you can create custom](https://youtu.be/tSSc42tCVto?t=2) [svg icons with x color draw in obsidian](https://youtu.be/tSSc42tCVto?t=4) [this is going to be a slightly more](https://youtu.be/tSSc42tCVto?t=8) [technical discussion though there's not](https://youtu.be/tSSc42tCVto?t=10) [going to be any programming involved but](https://youtu.be/tSSc42tCVto?t=12) [we are going to look at cascading style](https://youtu.be/tSSc42tCVto?t=15) [sheets css files as well as we are going](https://youtu.be/tSSc42tCVto?t=18) [to look at the inner structure of an svg](https://youtu.be/tSSc42tCVto?t=21) [document so there is going to be some](https://youtu.be/tSSc42tCVto?t=25) [technical parts to it but i think if you](https://youtu.be/tSSc42tCVto?t=28) [have the patience for sure you can also](https://youtu.be/tSSc42tCVto?t=30) [follow along and understand what's going](https://youtu.be/tSSc42tCVto?t=33) [on to understand why we would want to do](https://youtu.be/tSSc42tCVto?t=36) [this in the first place i wanted to talk](https://youtu.be/tSSc42tCVto?t=39) [about the call out types in obsidian](https://youtu.be/tSSc42tCVto?t=41) [this was introduced fairly recently and](https://youtu.be/tSSc42tCVto?t=44) [i think it's a fantastic feature so](https://youtu.be/tSSc42tCVto?t=47) [let's first talk about what call outs](https://youtu.be/tSSc42tCVto?t=50) [are and then let's talk about custom](https://youtu.be/tSSc42tCVto?t=52) [call-outs how you can customize them and](https://youtu.be/tSSc42tCVto?t=55) [then we'll dive into the svg icon](https://youtu.be/tSSc42tCVto?t=57) [creation with excalidra](https://youtu.be/tSSc42tCVto?t=61) [so callouts are these sections in your](https://youtu.be/tSSc42tCVto?t=64) [document that you can highlight with an](https://youtu.be/tSSc42tCVto?t=66) [icon and a color you can even make them](https://youtu.be/tSSc42tCVto?t=70) [folding so this could be a folding note](https://youtu.be/tSSc42tCVto?t=73) [if i type a dash here](https://youtu.be/tSSc42tCVto?t=75) [and i type whatever title i want folding](https://youtu.be/tSSc42tCVto?t=78) [note](https://youtu.be/tSSc42tCVto?t=81) [like this](https://youtu.be/tSSc42tCVto?t=82) [then this becomes a folding note with](https://youtu.be/tSSc42tCVto?t=83) [the details appearing when i open the](https://youtu.be/tSSc42tCVto?t=85) [note and it can be hidden if i close the](https://youtu.be/tSSc42tCVto?t=88) [note there are many pre-built call-out](https://youtu.be/tSSc42tCVto?t=91) [types in obsidian such as note abstract](https://youtu.be/tSSc42tCVto?t=94) [info tip success question warning](https://youtu.be/tSSc42tCVto?t=98) [failure](https://youtu.be/tSSc42tCVto?t=101) [quote example bug danger](https://youtu.be/tSSc42tCVto?t=102) [these are already there in the system](https://youtu.be/tSSc42tCVto?t=105) [many of them have different](https://youtu.be/tSSc42tCVto?t=108) [aliases so failure can be fail or](https://youtu.be/tSSc42tCVto?t=110) [missing or warning can be caution](https://youtu.be/tSSc42tCVto?t=112) [attention the way you create such a call](https://youtu.be/tSSc42tCVto?t=114) [out is you create a quote and then in](https://youtu.be/tSSc42tCVto?t=118) [brackets](https://youtu.be/tSSc42tCVto?t=121) [you write the keyword starting with an](https://youtu.be/tSSc42tCVto?t=122) [exclamation mark and if this is](https://youtu.be/tSSc42tCVto?t=126) [recognized then this will turn into a](https://youtu.be/tSSc42tCVto?t=128) [call out with some nice visualization](https://youtu.be/tSSc42tCVto?t=131) [this is very useful if you want to](https://youtu.be/tSSc42tCVto?t=135) [highlight special sections of your](https://youtu.be/tSSc42tCVto?t=137) [document](https://youtu.be/tSSc42tCVto?t=140) [you can also create custom call-out](https://youtu.be/tSSc42tCVto?t=142) [types there's a description in obsidian](https://youtu.be/tSSc42tCVto?t=144) [help how to do this so if you open up](https://youtu.be/tSSc42tCVto?t=147) [city and help you can scroll down and](https://youtu.be/tSSc42tCVto?t=150) [there's an explanation of how this](https://youtu.be/tSSc42tCVto?t=153) [should be done what you need is you need](https://youtu.be/tSSc42tCVto?t=155) [to create a css snippet](https://youtu.be/tSSc42tCVto?t=158) [and in that you need to define your](https://youtu.be/tSSc42tCVto?t=161) [custom call out i'll show you in a](https://youtu.be/tSSc42tCVto?t=163) [second](https://youtu.be/tSSc42tCVto?t=165) [and you can see i created two custom](https://youtu.be/tSSc42tCVto?t=166) [callouts here one is if i find something](https://youtu.be/tSSc42tCVto?t=169) [interesting then i have my call out for](https://youtu.be/tSSc42tCVto?t=172) [interesting and also](https://youtu.be/tSSc42tCVto?t=175) [if i want to paste a tweet into my notes](https://youtu.be/tSSc42tCVto?t=177) [then i have this custom callout for](https://youtu.be/tSSc42tCVto?t=181) [tweets](https://youtu.be/tSSc42tCVto?t=183) [as i was reading thiago's building a](https://youtu.be/tSSc42tCVto?t=185) [second brain book thiago talks about](https://youtu.be/tSSc42tCVto?t=187) [different things that you might want to](https://youtu.be/tSSc42tCVto?t=190) [take notes on in your second brain and](https://youtu.be/tSSc42tCVto?t=192) [he mentions things like stories insights](https://youtu.be/tSSc42tCVto?t=195) [memories reflections musings or some](https://youtu.be/tSSc42tCVto?t=198) [things from the outer world like](https://youtu.be/tSSc42tCVto?t=202) [highlights quotes bookmarks etc](https://youtu.be/tSSc42tCVto?t=204) [and i was thinking that these could be](https://youtu.be/tSSc42tCVto?t=207) [custom call-out types as well](https://youtu.be/tSSc42tCVto?t=209) [so today we are going to create a custom](https://youtu.be/tSSc42tCVto?t=212) [call out for a memory something that i](https://youtu.be/tSSc42tCVto?t=215) [want to remember](https://youtu.be/tSSc42tCVto?t=218) [and there are a couple of links down](https://youtu.be/tSSc42tCVto?t=221) [here and we will use them one by one](https://youtu.be/tSSc42tCVto?t=222) [first let me open my css snippet for](https://youtu.be/tSSc42tCVto?t=225) [call outs if you don't know where](https://youtu.be/tSSc42tCVto?t=229) [snippets are stored the easiest way to](https://youtu.be/tSSc42tCVto?t=231) [get to them is to open the more options](https://youtu.be/tSSc42tCVto?t=234) [menu here and to choose show in system](https://youtu.be/tSSc42tCVto?t=237) [explorer wherever you are in your world](https://youtu.be/tSSc42tCVto?t=240) [you can open the document and that will](https://youtu.be/tSSc42tCVto?t=243) [bring up system explorer in system](https://youtu.be/tSSc42tCVto?t=246) [explorer you can navigate to the root of](https://youtu.be/tSSc42tCVto?t=249) [your vault so that is right here for me](https://youtu.be/tSSc42tCVto?t=252) [and you need to look for the dot](https://youtu.be/tSSc42tCVto?t=256) [obsidian folder](https://youtu.be/tSSc42tCVto?t=258) [and if you open this you can see the](https://youtu.be/tSSc42tCVto?t=260) [snippets folder](https://youtu.be/tSSc42tCVto?t=263) [in this folder](https://youtu.be/tSSc42tCVto?t=265) [and i have a number of different](https://youtu.be/tSSc42tCVto?t=266) [css snippets but we are now looking at](https://youtu.be/tSSc42tCVto?t=269) [the callouts.css](https://youtu.be/tSSc42tCVto?t=272) [file](https://youtu.be/tSSc42tCVto?t=275) [i'm using notepad plus plus to edit](https://youtu.be/tSSc42tCVto?t=276) [these files you can choose any other](https://youtu.be/tSSc42tCVto?t=279) [editor](https://youtu.be/tSSc42tCVto?t=282) [so what you see here are the two custom](https://youtu.be/tSSc42tCVto?t=283) [css snippets for my interesting and](https://youtu.be/tSSc42tCVto?t=286) [tweet call outs you can see this is a](https://youtu.be/tSSc42tCVto?t=290) [very simple snippet it is actually a](https://youtu.be/tSSc42tCVto?t=293) [copy paste from what you can find in the](https://youtu.be/tSSc42tCVto?t=297) [help i just simply copied this and then](https://youtu.be/tSSc42tCVto?t=300) [of course i replaced my call out type](https://youtu.be/tSSc42tCVto?t=304) [with my call out type the color is an](https://youtu.be/tSSc42tCVto?t=307) [rgb color and it's easy to get an rgb](https://youtu.be/tSSc42tCVto?t=310) [color if you type color picker in search](https://youtu.be/tSSc42tCVto?t=314) [then google brings up this color picker](https://youtu.be/tSSc42tCVto?t=318) [immediately and you can choose a color](https://youtu.be/tSSc42tCVto?t=321) [whatever color you like and here the](https://youtu.be/tSSc42tCVto?t=324) [first value](https://youtu.be/tSSc42tCVto?t=326) [is the rgb color you just simply copy](https://youtu.be/tSSc42tCVto?t=328) [paste this color and that is what's](https://youtu.be/tSSc42tCVto?t=332) [placed right here](https://youtu.be/tSSc42tCVto?t=335) [obsidian includes a set of pre-built](https://youtu.be/tSSc42tCVto?t=337) [icons and they are the lucid icons this](https://youtu.be/tSSc42tCVto?t=340) [is the link to the lucid icons](https://youtu.be/tSSc42tCVto?t=344) [i'm going to include this in the video](https://youtu.be/tSSc42tCVto?t=347) [description here you can choose an icon](https://youtu.be/tSSc42tCVto?t=350) [of your](https://youtu.be/tSSc42tCVto?t=353) [desire and the way you include it in the](https://youtu.be/tSSc42tCVto?t=354) [css snippet is the following so let's](https://youtu.be/tSSc42tCVto?t=358) [say for the memory as a first step i](https://youtu.be/tSSc42tCVto?t=360) [want to use the album icon](https://youtu.be/tSSc42tCVto?t=363) [and this is a very simple solution now](https://youtu.be/tSSc42tCVto?t=366) [i come back to my css snippet first of](https://youtu.be/tSSc42tCVto?t=369) [all i'm going to make a copy of my tweet](https://youtu.be/tSSc42tCVto?t=372) [css snippet i'm going to paste it here](https://youtu.be/tSSc42tCVto?t=376) [i'm going to replace tweet with memory](https://youtu.be/tSSc42tCVto?t=379) [like this i'm going to select a color](https://youtu.be/tSSc42tCVto?t=384) [here i actually like this color so this](https://youtu.be/tSSc42tCVto?t=387) [is going to be the color of a memory i'm](https://youtu.be/tSSc42tCVto?t=389) [going to replace this value right here](https://youtu.be/tSSc42tCVto?t=392) [with the color of the memory and here](https://youtu.be/tSSc42tCVto?t=395) [instead of lucid twitter i'm going to](https://youtu.be/tSSc42tCVto?t=398) [write lucid](https://youtu.be/tSSc42tCVto?t=402) [album](https://youtu.be/tSSc42tCVto?t=403) [like this and i need to save the file so](https://youtu.be/tSSc42tCVto?t=404) [i pressed ctrl s](https://youtu.be/tSSc42tCVto?t=408) [now if i come back to obsidian then you](https://youtu.be/tSSc42tCVto?t=411) [can see that the color has already](https://youtu.be/tSSc42tCVto?t=414) [changed but the icon hasn't you need to](https://youtu.be/tSSc42tCVto?t=416) [reload the page for the icon to appear](https://youtu.be/tSSc42tCVto?t=419) [so i'm going to](https://youtu.be/tSSc42tCVto?t=422) [navigate back](https://youtu.be/tSSc42tCVto?t=423) [and forward so just opened an empty](https://youtu.be/tSSc42tCVto?t=425) [document and came back](https://youtu.be/tSSc42tCVto?t=428) [and you can see that now](https://youtu.be/tSSc42tCVto?t=429) [the icon has been loaded innovate this](https://youtu.be/tSSc42tCVto?t=432) [is the simple quick solution you look](https://youtu.be/tSSc42tCVto?t=434) [for an icon that's to your liking](https://youtu.be/tSSc42tCVto?t=437) [and if it's a lucid icon so if you are](https://youtu.be/tSSc42tCVto?t=440) [able to find it here on the lucid site](https://youtu.be/tSSc42tCVto?t=444) [then bingo it is so simple to insert](https://youtu.be/tSSc42tCVto?t=447) [that icon into your css and then it will](https://youtu.be/tSSc42tCVto?t=451) [appear in your document](https://youtu.be/tSSc42tCVto?t=456) [now imagine that you don't find an icon](https://youtu.be/tSSc42tCVto?t=458) [and or you're not happy with how the](https://youtu.be/tSSc42tCVto?t=461) [memory icon looks like that's the use](https://youtu.be/tSSc42tCVto?t=464) [case that we are going to be talking](https://youtu.be/tSSc42tCVto?t=466) [about right now](https://youtu.be/tSSc42tCVto?t=468) [in that case you can search the internet](https://youtu.be/tSSc42tCVto?t=470) [for other icons so for example you can](https://youtu.be/tSSc42tCVto?t=473) [navigate to font awesome](https://youtu.be/tSSc42tCVto?t=476) [and here there are plenty of icons to](https://youtu.be/tSSc42tCVto?t=479) [choose from depending on your license](https://youtu.be/tSSc42tCVto?t=482) [you might only be able to access free](https://youtu.be/tSSc42tCVto?t=484) [icons but if you like an icon here let's](https://youtu.be/tSSc42tCVto?t=487) [say i like the airbnb icon for my memory](https://youtu.be/tSSc42tCVto?t=490) [icon then i click on the icon i like and](https://youtu.be/tSSc42tCVto?t=495) [i click copy svg code so i copied the](https://youtu.be/tSSc42tCVto?t=498) [svg code to the clipboard and i come](https://youtu.be/tSSc42tCVto?t=503) [back to my css snippet](https://youtu.be/tSSc42tCVto?t=507) [like this and instead of the lucid album](https://youtu.be/tSSc42tCVto?t=510) [i'm going to paste the icon here so i](https://youtu.be/tSSc42tCVto?t=514) [type this quote mark here for two quote](https://youtu.be/tSSc42tCVto?t=517) [marks this is where my copied svg will](https://youtu.be/tSSc42tCVto?t=520) [be inserted and i simply press ctrl v to](https://youtu.be/tSSc42tCVto?t=524) [paste what i copied from font awesome](https://youtu.be/tSSc42tCVto?t=528) [website and when i save this](https://youtu.be/tSSc42tCVto?t=532) [and i come back to my document i](https://youtu.be/tSSc42tCVto?t=534) [navigate away from my page and back then](https://youtu.be/tSSc42tCVto?t=537) [you can see that the custom svg icon was](https://youtu.be/tSSc42tCVto?t=541) [inserted so this is great if you didn't](https://youtu.be/tSSc42tCVto?t=545) [find a nice icon on lucid you can still](https://youtu.be/tSSc42tCVto?t=547) [look for icons elsewhere for example](https://youtu.be/tSSc42tCVto?t=551) [font awesome and you can insert it this](https://youtu.be/tSSc42tCVto?t=554) [way](https://youtu.be/tSSc42tCVto?t=557) [by pasting the svg text between single](https://youtu.be/tSSc42tCVto?t=558) [quotation marks or quote marks and](https://youtu.be/tSSc42tCVto?t=562) [obsidian will pick that icon up](https://youtu.be/tSSc42tCVto?t=565) [if you don't like or if you cannot find](https://youtu.be/tSSc42tCVto?t=568) [a good icon on font awesome or anywhere](https://youtu.be/tSSc42tCVto?t=571) [else you can create your own icon with](https://youtu.be/tSSc42tCVto?t=575) [xcoli draw and we can also insert that](https://youtu.be/tSSc42tCVto?t=578) [icon here so let me walk you through the](https://youtu.be/tSSc42tCVto?t=581) [process there are a couple of things to](https://youtu.be/tSSc42tCVto?t=583) [pay attention to](https://youtu.be/tSSc42tCVto?t=585) [but it is not that extremely difficult](https://youtu.be/tSSc42tCVto?t=587) [so first of all i'm going to open this](https://youtu.be/tSSc42tCVto?t=590) [page i already created an empty document](https://youtu.be/tSSc42tCVto?t=593) [called memory icon i'm first going to](https://youtu.be/tSSc42tCVto?t=595) [draw a rectangle here](https://youtu.be/tSSc42tCVto?t=598) [and i'm going to make this](https://youtu.be/tSSc42tCVto?t=601) [rectangle with a sharp edge and i'm](https://youtu.be/tSSc42tCVto?t=603) [going to make it transparent i'm also](https://youtu.be/tSSc42tCVto?t=606) [going to make sure that the slopiness is](https://youtu.be/tSSc42tCVto?t=609) [architect and the stroke width is the](https://youtu.be/tSSc42tCVto?t=612) [thinnest possible i'm going to select](https://youtu.be/tSSc42tCVto?t=616) [this rectangle and i'm going to choose](https://youtu.be/tSSc42tCVto?t=618) [the set dimensions excluder automate](https://youtu.be/tSSc42tCVto?t=621) [script you know that here if you click](https://youtu.be/tSSc42tCVto?t=624) [on this button then you can install](https://youtu.be/tSSc42tCVto?t=627) [various scripts and for example i have](https://youtu.be/tSSc42tCVto?t=630) [the set dimensions script that's](https://youtu.be/tSSc42tCVto?t=633) [installed and set dimensions](https://youtu.be/tSSc42tCVto?t=636) [allows me to set a specific dimension](https://youtu.be/tSSc42tCVto?t=638) [for an object so i'm going to select](https://youtu.be/tSSc42tCVto?t=641) [this rectangle i'm going to choose set](https://youtu.be/tSSc42tCVto?t=644) [dimensions](https://youtu.be/tSSc42tCVto?t=647) [and i'm going to type in the dimensions](https://youtu.be/tSSc42tCVto?t=648) [the first two values are the x and y](https://youtu.be/tSSc42tCVto?t=651) [coordinates i don't quite care about](https://youtu.be/tSSc42tCVto?t=653) [them](https://youtu.be/tSSc42tCVto?t=655) [but i want an svg icon that's 512 by](https://youtu.be/tSSc42tCVto?t=656) [512. you can make it smaller as well 64](https://youtu.be/tSSc42tCVto?t=661) [by 64 or 128 by 128 those are typical](https://youtu.be/tSSc42tCVto?t=665) [icon sizes i'm going for the 512. size](https://youtu.be/tSSc42tCVto?t=670) [right now i click ok](https://youtu.be/tSSc42tCVto?t=674) [and that has transformed my rectangle](https://youtu.be/tSSc42tCVto?t=676) [into this](https://youtu.be/tSSc42tCVto?t=680) [square with 512 size in both directions](https://youtu.be/tSSc42tCVto?t=681) [i'm going to lock this item so it](https://youtu.be/tSSc42tCVto?t=686) [doesn't bother me as i work on this](https://youtu.be/tSSc42tCVto?t=689) [canvas now i'm going to cheat a little i](https://youtu.be/tSSc42tCVto?t=692) [have already created my icon for](https://youtu.be/tSSc42tCVto?t=695) [memories that's this book right here](https://youtu.be/tSSc42tCVto?t=697) [this is a diary with a heart because](https://youtu.be/tSSc42tCVto?t=700) [i'm fond of the memories that i want to](https://youtu.be/tSSc42tCVto?t=702) [remember so i'm going to drag this icon](https://youtu.be/tSSc42tCVto?t=705) [right here the idea is you create an](https://youtu.be/tSSc42tCVto?t=708) [icon within this boundary set by your](https://youtu.be/tSSc42tCVto?t=711) [rectangle i advise to use few colors so](https://youtu.be/tSSc42tCVto?t=715) [good icons typically because these are](https://youtu.be/tSSc42tCVto?t=719) [very small icons if you look at this](https://youtu.be/tSSc42tCVto?t=722) [right here](https://youtu.be/tSSc42tCVto?t=724) [it's best to use a single color and in](https://youtu.be/tSSc42tCVto?t=725) [this case i recommend using black you](https://youtu.be/tSSc42tCVto?t=729) [will see later on what we will do with](https://youtu.be/tSSc42tCVto?t=732) [that color when we are done so you're](https://youtu.be/tSSc42tCVto?t=734) [done with your icon there's still a few](https://youtu.be/tSSc42tCVto?t=736) [things that you need to set we will](https://youtu.be/tSSc42tCVto?t=739) [switch over to markdown view for this](https://youtu.be/tSSc42tCVto?t=741) [file and we are going to add](https://youtu.be/tSSc42tCVto?t=744) [three front matter keys for x color draw](https://youtu.be/tSSc42tCVto?t=746) [to know what to do so if i start to type](https://youtu.be/tSSc42tCVto?t=750) [x co lid raw](https://youtu.be/tSSc42tCVto?t=753) [dash and i'm going to type svg padding](https://youtu.be/tSSc42tCVto?t=756) [i want to export this icon with zero](https://youtu.be/tSSc42tCVto?t=760) [padding the padding is important because](https://youtu.be/tSSc42tCVto?t=764) [if you have a curvy line](https://youtu.be/tSSc42tCVto?t=766) [then it may not fit the rectangle that's](https://youtu.be/tSSc42tCVto?t=768) [being exported with the image and](https://youtu.be/tSSc42tCVto?t=772) [therefore typically the svg export has](https://youtu.be/tSSc42tCVto?t=775) [this padding around this in this case i](https://youtu.be/tSSc42tCVto?t=778) [want to make sure that my exported image](https://youtu.be/tSSc42tCVto?t=781) [is exactly 512 by 512.](https://youtu.be/tSSc42tCVto?t=783) [also](https://youtu.be/tSSc42tCVto?t=788) [i want to export with the transparent](https://youtu.be/tSSc42tCVto?t=789) [background so i'm going to set xcalitro](https://youtu.be/tSSc42tCVto?t=793) [export transparent true and i also want](https://youtu.be/tSSc42tCVto?t=796) [to make sure that this export is in](https://youtu.be/tSSc42tCVto?t=800) [light mode or it's not in](https://youtu.be/tSSc42tCVto?t=804) [dark mode that the colors are going to](https://youtu.be/tSSc42tCVto?t=807) [be black and white as i expect them of](https://youtu.be/tSSc42tCVto?t=810) [course these are settings that you can](https://youtu.be/tSSc42tCVto?t=814) [find in the xcalitro plugin settings but](https://youtu.be/tSSc42tCVto?t=816) [this way you can override these settings](https://youtu.be/tSSc42tCVto?t=819) [for a single document so when i'm done](https://youtu.be/tSSc42tCVto?t=821) [with this](https://youtu.be/tSSc42tCVto?t=824) [i open this in excalidraw again and i](https://youtu.be/tSSc42tCVto?t=826) [simply choose the save svg into vault](https://youtu.be/tSSc42tCVto?t=829) [action](https://youtu.be/tSSc42tCVto?t=834) [and once i'm done with that i'm going to](https://youtu.be/tSSc42tCVto?t=835) [open](https://youtu.be/tSSc42tCVto?t=837) [the folder so again i'm clicking here](https://youtu.be/tSSc42tCVto?t=838) [show in system explorer](https://youtu.be/tSSc42tCVto?t=841) [and let me bring up](https://youtu.be/tSSc42tCVto?t=844) [the window so with this this svg icon](https://youtu.be/tSSc42tCVto?t=846) [was created](https://youtu.be/tSSc42tCVto?t=850) [now](https://youtu.be/tSSc42tCVto?t=852) [i'm going to pull this to the side i'm](https://youtu.be/tSSc42tCVto?t=853) [going to bring up my notepad plus plus](https://youtu.be/tSSc42tCVto?t=856) [editor and i'm going to open this svg](https://youtu.be/tSSc42tCVto?t=860) [icon here](https://youtu.be/tSSc42tCVto?t=863) [and you can see that this is a pretty](https://youtu.be/tSSc42tCVto?t=864) [long svg icon with all sorts of stuff](https://youtu.be/tSSc42tCVto?t=867) [i'll show you how to quickly clean up](https://youtu.be/tSSc42tCVto?t=870) [this icon so it looks more like this](https://youtu.be/tSSc42tCVto?t=873) [icon that we downloaded from font](https://youtu.be/tSSc42tCVto?t=876) [awesome](https://youtu.be/tSSc42tCVto?t=879) [this is another link that i'm going to](https://youtu.be/tSSc42tCVto?t=880) [include in the video description](https://youtu.be/tSSc42tCVto?t=883) [svg omg](https://youtu.be/tSSc42tCVto?t=886) [is a very useful tool if you open](https://youtu.be/tSSc42tCVto?t=888) [the web page and you drop the svg icon](https://youtu.be/tSSc42tCVto?t=891) [in here you have a set of features that](https://youtu.be/tSSc42tCVto?t=894) [you can turn on to reduce the size of](https://youtu.be/tSSc42tCVto?t=897) [this icon so i pretty much clicked](https://youtu.be/tSSc42tCVto?t=901) [everything](https://youtu.be/tSSc42tCVto?t=904) [the bit that i didn't click for example](https://youtu.be/tSSc42tCVto?t=905) [removing the namespace is because then](https://youtu.be/tSSc42tCVto?t=909) [the icon disappears](https://youtu.be/tSSc42tCVto?t=912) [and the script elements well i can](https://youtu.be/tSSc42tCVto?t=914) [turn that on but actually that is not](https://youtu.be/tSSc42tCVto?t=917) [going to make it smaller so you can see](https://youtu.be/tSSc42tCVto?t=920) [that this is a way to decrease the size](https://youtu.be/tSSc42tCVto?t=923) [of the icon and now if i click download](https://youtu.be/tSSc42tCVto?t=926) [then this downloads my icon i'm going to](https://youtu.be/tSSc42tCVto?t=929) [open](https://youtu.be/tSSc42tCVto?t=933) [this icon now in notepad plus plus it is](https://youtu.be/tSSc42tCVto?t=934) [not significantly shorter but it has](https://youtu.be/tSSc42tCVto?t=939) [become somewhat shorter and now there](https://youtu.be/tSSc42tCVto?t=942) [are still two things that we want to do](https://youtu.be/tSSc42tCVto?t=945) [but let me first copy this icon into my](https://youtu.be/tSSc42tCVto?t=947) [css so now i'm selecting](https://youtu.be/tSSc42tCVto?t=951) [this icon that i downloaded from svg omg](https://youtu.be/tSSc42tCVto?t=954) [and i'm just replacing this svg from](https://youtu.be/tSSc42tCVto?t=958) [font awesome so i'm deleting this and](https://youtu.be/tSSc42tCVto?t=962) [i'm pasting my own icon in here i'm](https://youtu.be/tSSc42tCVto?t=965) [going to save this and if i come back to](https://youtu.be/tSSc42tCVto?t=969) [obsidian](https://youtu.be/tSSc42tCVto?t=972) [i can already close this page right here](https://youtu.be/tSSc42tCVto?t=973) [i don't need the image anymore if i](https://youtu.be/tSSc42tCVto?t=976) [navigate forward and backwards](https://youtu.be/tSSc42tCVto?t=978) [then actually this is already looking](https://youtu.be/tSSc42tCVto?t=981) [pretty good so we could even stop at](https://youtu.be/tSSc42tCVto?t=984) [this point i want to show some](https://youtu.be/tSSc42tCVto?t=987) [additional changes that you can make to](https://youtu.be/tSSc42tCVto?t=989) [make it even more cross-platform](https://youtu.be/tSSc42tCVto?t=992) [if you will so let me show you some](https://youtu.be/tSSc42tCVto?t=996) [things that we are going to be doing](https://youtu.be/tSSc42tCVto?t=997) [with this svg](https://youtu.be/tSSc42tCVto?t=999) [first of all there are still some items](https://youtu.be/tSSc42tCVto?t=1001) [here so this is the definitions i'm](https://youtu.be/tSSc42tCVto?t=1004) [going to delete that that's an](https://youtu.be/tSSc42tCVto?t=1006) [unnecessary component and then this path](https://youtu.be/tSSc42tCVto?t=1008) [at the beginning i can delete this](https://youtu.be/tSSc42tCVto?t=1012) [because this is simply the thin line the](https://youtu.be/tSSc42tCVto?t=1015) [thin rectangle around my drawing so you](https://youtu.be/tSSc42tCVto?t=1018) [can see here this is 512 by 512 i don't](https://youtu.be/tSSc42tCVto?t=1022) [need this rectangle so i'm going to](https://youtu.be/tSSc42tCVto?t=1027) [delete the rectangle](https://youtu.be/tSSc42tCVto?t=1029) [and i'm also going to replace](https://youtu.be/tSSc42tCVto?t=1031) [the stroke color](https://youtu.be/tSSc42tCVto?t=1034) [black](https://youtu.be/tSSc42tCVto?t=1036) [with a stroke color that's](https://youtu.be/tSSc42tCVto?t=1037) [the current color so i'm going to choose](https://youtu.be/tSSc42tCVto?t=1040) [search replace in notepad plus plus](https://youtu.be/tSSc42tCVto?t=1043) [and i'm going to replace](https://youtu.be/tSSc42tCVto?t=1047) [all the blacks with the current color](https://youtu.be/tSSc42tCVto?t=1049) [value](https://youtu.be/tSSc42tCVto?t=1052) [current color is a special css value](https://youtu.be/tSSc42tCVto?t=1054) [that represents the current drawing](https://youtu.be/tSSc42tCVto?t=1058) [color wherever the icon is so](https://youtu.be/tSSc42tCVto?t=1061) [it inherits the color from the parent](https://youtu.be/tSSc42tCVto?t=1064) [and that will make sure that the icon](https://youtu.be/tSSc42tCVto?t=1067) [follows the same color as your color](https://youtu.be/tSSc42tCVto?t=1069) [that is set for the call out so i'm](https://youtu.be/tSSc42tCVto?t=1073) [going to replace all the blacks with the](https://youtu.be/tSSc42tCVto?t=1075) [current color and if i save this now i](https://youtu.be/tSSc42tCVto?t=1078) [come back to my document i navigate away](https://youtu.be/tSSc42tCVto?t=1081) [and back from the document](https://youtu.be/tSSc42tCVto?t=1085) [not much has changed](https://youtu.be/tSSc42tCVto?t=1087) [but](https://youtu.be/tSSc42tCVto?t=1089) [with the current color now this is more](https://youtu.be/tSSc42tCVto?t=1090) [proper now the only thing that we have](https://youtu.be/tSSc42tCVto?t=1092) [still is you can see that the heart is](https://youtu.be/tSSc42tCVto?t=1095) [white](https://youtu.be/tSSc42tCVto?t=1098) [which is actually not bad but if i would](https://youtu.be/tSSc42tCVto?t=1099) [switch to light mode so let me switch](https://youtu.be/tSSc42tCVto?t=1102) [now](https://youtu.be/tSSc42tCVto?t=1104) [my theme to light mode](https://youtu.be/tSSc42tCVto?t=1105) [then what you will see is well it's](https://youtu.be/tSSc42tCVto?t=1108) [still white and that is in this setup](https://youtu.be/tSSc42tCVto?t=1110) [actually not bad because the theme here](https://youtu.be/tSSc42tCVto?t=1113) [is a bit yellowish let me change the](https://youtu.be/tSSc42tCVto?t=1116) [theme to the default obsidian theme like](https://youtu.be/tSSc42tCVto?t=1120) [this and let me](https://youtu.be/tSSc42tCVto?t=1123) [close it and close it](https://youtu.be/tSSc42tCVto?t=1125) [and](https://youtu.be/tSSc42tCVto?t=1128) [frankly the white color is not bad but](https://youtu.be/tSSc42tCVto?t=1129) [you can see twitter and the light bulb](https://youtu.be/tSSc42tCVto?t=1131) [has the background color of this line](https://youtu.be/tSSc42tCVto?t=1134) [and in my case the heart is white and](https://youtu.be/tSSc42tCVto?t=1138) [this might be what you want if you want](https://youtu.be/tSSc42tCVto?t=1141) [to make that a different color then](https://youtu.be/tSSc42tCVto?t=1144) [and i'm going to switch back to dark](https://youtu.be/tSSc42tCVto?t=1147) [mode and i'm going to choose](https://youtu.be/tSSc42tCVto?t=1149) [my](https://youtu.be/tSSc42tCVto?t=1152) [groov box](https://youtu.be/tSSc42tCVto?t=1153) [theme this is the theme i'm using if i](https://youtu.be/tSSc42tCVto?t=1154) [want to change that color to something](https://youtu.be/tSSc42tCVto?t=1157) [different then i need to edit my svg and](https://youtu.be/tSSc42tCVto?t=1159) [let me show you there so we still have](https://youtu.be/tSSc42tCVto?t=1164) [somewhere the white color in our svg so](https://youtu.be/tSSc42tCVto?t=1167) [let's look for that you can see here](https://youtu.be/tSSc42tCVto?t=1170) [i have the white color i need to change](https://youtu.be/tSSc42tCVto?t=1173) [this color to something different](https://youtu.be/tSSc42tCVto?t=1176) [and you can choose the color you can](https://youtu.be/tSSc42tCVto?t=1179) [either of course leave it white because](https://youtu.be/tSSc42tCVto?t=1182) [we just saw that white is not so bad](https://youtu.be/tSSc42tCVto?t=1185) [or you can choose a css color i'm going](https://youtu.be/tSSc42tCVto?t=1188) [to press](https://youtu.be/tSSc42tCVto?t=1191) [ctrl shift i or command shift i](https://youtu.be/tSSc42tCVto?t=1192) [on mac to bring up the developer console](https://youtu.be/tSSc42tCVto?t=1196) [and i click on the elements here](https://youtu.be/tSSc42tCVto?t=1201) [and](https://youtu.be/tSSc42tCVto?t=1204) [i'm just clicking on the document so i](https://youtu.be/tSSc42tCVto?t=1205) [get to the root of the document and here](https://youtu.be/tSSc42tCVto?t=1208) [on the right hand side](https://youtu.be/tSSc42tCVto?t=1211) [under styles](https://youtu.be/tSSc42tCVto?t=1213) [you can scroll down to see all the](https://youtu.be/tSSc42tCVto?t=1214) [colors that are used in the document and](https://youtu.be/tSSc42tCVto?t=1217) [so if i want to apply](https://youtu.be/tSSc42tCVto?t=1220) [the dark background color or if i want](https://youtu.be/tSSc42tCVto?t=1223) [to apply](https://youtu.be/tSSc42tCVto?t=1226) [something else i can choose a color from](https://youtu.be/tSSc42tCVto?t=1227) [here so for example i can choose instead](https://youtu.be/tSSc42tCVto?t=1230) [of white this to be for example text](https://youtu.be/tSSc42tCVto?t=1234) [normal or i can choose this color text](https://youtu.be/tSSc42tCVto?t=1237) [title h1 which is the first level](https://youtu.be/tSSc42tCVto?t=1240) [section color so you can see it's this](https://youtu.be/tSSc42tCVto?t=1243) [color the css for custom callout types](https://youtu.be/tSSc42tCVto?t=1246) [if i want to use this color then i can](https://youtu.be/tSSc42tCVto?t=1249) [come back to my](https://youtu.be/tSSc42tCVto?t=1252) [css and i can replace](https://youtu.be/tSSc42tCVto?t=1254) [the three f's with the following i type](https://youtu.be/tSSc42tCVto?t=1257) [var as this is a variable i paste in the](https://youtu.be/tSSc42tCVto?t=1260) [name of the variable and i close the](https://youtu.be/tSSc42tCVto?t=1264) [parentheses](https://youtu.be/tSSc42tCVto?t=1267) [if i save my](https://youtu.be/tSSc42tCVto?t=1268) [css now i come back to obsidian i can](https://youtu.be/tSSc42tCVto?t=1270) [close the developer console i navigate](https://youtu.be/tSSc42tCVto?t=1274) [away](https://youtu.be/tSSc42tCVto?t=1278) [and back from my page and you can see](https://youtu.be/tSSc42tCVto?t=1279) [that now my call out for memory has this](https://youtu.be/tSSc42tCVto?t=1282) [red color](https://youtu.be/tSSc42tCVto?t=1285) [and if now i change my theme](https://youtu.be/tSSc42tCVto?t=1287) [so let's say again i change back to the](https://youtu.be/tSSc42tCVto?t=1290) [default obsidian theme](https://youtu.be/tSSc42tCVto?t=1293) [and i close this then you will see this](https://youtu.be/tSSc42tCVto?t=1295) [color didn't exist in](https://youtu.be/tSSc42tCVto?t=1298) [the css](https://youtu.be/tSSc42tCVto?t=1300) [maybe we will choose the text accent and](https://youtu.be/tSSc42tCVto?t=1303) [that is going to be available in both of](https://youtu.be/tSSc42tCVto?t=1305) [them so now i'm coming back to my css](https://youtu.be/tSSc42tCVto?t=1308) [i'm changing text title](https://youtu.be/tSSc42tCVto?t=1312) [h1 to text accent i'm saving this](https://youtu.be/tSSc42tCVto?t=1315) [i'm navigating back closing developer](https://youtu.be/tSSc42tCVto?t=1320) [console moving back](https://youtu.be/tSSc42tCVto?t=1323) [and forward](https://youtu.be/tSSc42tCVto?t=1325) [and you can see that](https://youtu.be/tSSc42tCVto?t=1327) [now](https://youtu.be/tSSc42tCVto?t=1328) [i have a blue heart in memory and if i](https://youtu.be/tSSc42tCVto?t=1329) [choose](https://youtu.be/tSSc42tCVto?t=1332) [my groove box theme](https://youtu.be/tSSc42tCVto?t=1333) [then let's see what](https://youtu.be/tSSc42tCVto?t=1336) [the accent color is i think that's an](https://youtu.be/tSSc42tCVto?t=1338) [orange color if i'm not mistaken so now](https://youtu.be/tSSc42tCVto?t=1341) [i have an orange heart so you can play](https://youtu.be/tSSc42tCVto?t=1343) [with this](https://youtu.be/tSSc42tCVto?t=1346) [but](https://youtu.be/tSSc42tCVto?t=1347) [maybe it's simplest to keep this white](https://youtu.be/tSSc42tCVto?t=1348) [or to set the color in x color draw](https://youtu.be/tSSc42tCVto?t=1351) [because whatever color you set here that](https://youtu.be/tSSc42tCVto?t=1354) [is the color that's being exported so](https://youtu.be/tSSc42tCVto?t=1358) [you also can play](https://youtu.be/tSSc42tCVto?t=1360) [with the colors like this so to recap we](https://youtu.be/tSSc42tCVto?t=1362) [created a custom svg icon and we](https://youtu.be/tSSc42tCVto?t=1365) [inserted that icon into a css snippet to](https://youtu.be/tSSc42tCVto?t=1369) [create our own call-out type for memory](https://youtu.be/tSSc42tCVto?t=1374) [and the dove into a bit of how to do](https://youtu.be/tSSc42tCVto?t=1378) [magic with svg the base story is to](https://youtu.be/tSSc42tCVto?t=1382) [replace the black color which is the](https://youtu.be/tSSc42tCVto?t=1387) [hashtag zero zero zero then you can see](https://youtu.be/tSSc42tCVto?t=1390) [this is the stroke color](https://youtu.be/tSSc42tCVto?t=1393) [we replaced all of the occurrences of](https://youtu.be/tSSc42tCVto?t=1395) [the stroke color with](https://youtu.be/tSSc42tCVto?t=1398) [current color](https://youtu.be/tSSc42tCVto?t=1401) [and current color is the default](https://youtu.be/tSSc42tCVto?t=1402) [inherited color when](https://youtu.be/tSSc42tCVto?t=1405) [an icon is inserted but we also did some](https://youtu.be/tSSc42tCVto?t=1407) [additional magic we looked for](https://youtu.be/tSSc42tCVto?t=1410) [a color variable for the heart](https://youtu.be/tSSc42tCVto?t=1412) [and so we changed the field color in](https://youtu.be/tSSc42tCVto?t=1416) [this case which was white fff we changed](https://youtu.be/tSSc42tCVto?t=1419) [it to this specific color](https://youtu.be/tSSc42tCVto?t=1422) [and also we](https://youtu.be/tSSc42tCVto?t=1425) [to some extent simplified the svg file](https://youtu.be/tSSc42tCVto?t=1426) [using the svg omg tool and downloading](https://youtu.be/tSSc42tCVto?t=1431) [the modified svg i also removed some](https://youtu.be/tSSc42tCVto?t=1435) [part of the svg in particular this first](https://youtu.be/tSSc42tCVto?t=1439) [path](https://youtu.be/tSSc42tCVto?t=1442) [i removed because that was the rectangle](https://youtu.be/tSSc42tCVto?t=1443) [around my svg as well as i removed the](https://youtu.be/tSSc42tCVto?t=1447) [definitions](https://youtu.be/tSSc42tCVto?t=1451) [hopefully this helps you find your way](https://youtu.be/tSSc42tCVto?t=1452) [in using x color draw to create custom](https://youtu.be/tSSc42tCVto?t=1455) [icons in some cases i do need custom](https://youtu.be/tSSc42tCVto?t=1458) [icons because i cannot find one](https://youtu.be/tSSc42tCVto?t=1462) [i actually like this icon with this](https://youtu.be/tSSc42tCVto?t=1464) [diary and the heart on it for memory of](https://youtu.be/tSSc42tCVto?t=1468) [course if i would want to go simple and](https://youtu.be/tSSc42tCVto?t=1471) [wouldn't want to go through this process](https://youtu.be/tSSc42tCVto?t=1473) [then using the lucid album is the](https://youtu.be/tSSc42tCVto?t=1475) [easiest solution because that is built](https://youtu.be/tSSc42tCVto?t=1479) [in and we did it in the first few](https://youtu.be/tSSc42tCVto?t=1482) [minutes of this video](https://youtu.be/tSSc42tCVto?t=1484) [but i thought that this is helpful for](https://youtu.be/tSSc42tCVto?t=1486) [you to understand how you can use](https://youtu.be/tSSc42tCVto?t=1489) [xcolitrod to customize the look and feel](https://youtu.be/tSSc42tCVto?t=1491) [of obsidian and i think it's just very](https://youtu.be/tSSc42tCVto?t=1494) [powerful that you can create your own](https://youtu.be/tSSc42tCVto?t=1497) [icons using xcode draw with a few little](https://youtu.be/tSSc42tCVto?t=1500) [tweaks](https://youtu.be/tSSc42tCVto?t=1503) [i hope you found this video helpful](https://youtu.be/tSSc42tCVto?t=1505) [and i hope to see you next time](https://youtu.be/tSSc42tCVto?t=1508) [thank you](https://youtu.be/tSSc42tCVto?t=1510)