# SVG inline icons
This is my css code for inline svg icons using: `![[lucide-icon.svg#icon]]`
```css
.theme-dark svg.icon,
.theme-dark div[src$="#icon"] img,
.theme-dark span[src$="#icon"] img,
.theme-dark img[src$="#icon"] {
height: 16px;
width: 20px;
filter:invert();
}
svg.icon,
div[src$="#icon"] img,
span[src$="#icon"] img,
img[src$="#icon"] {
height: 16px;
width: 20px;
}
div[src$="#icon"],
span[src$="#icon"] {
display: inline-block;
vertical-align: middle;
opacity: 0.6;
}
span[src$="#icon"] + span[src$="#icon"] {
margin-left: 2px;
}
```
Some exemples:
![[../../Icons/lucide-rss.svg#icon]] News icon
![[../../Icons/lucide-book.svg#icon]] Reading icon
![[../../Icons/lucide-book.svg#icon]]![[../../Icons/lucide-notebook-pen.svg#icon]] Reading and writing icons
![[../../Icons/lucide-video.svg#icon]] Video icon
You can use and download icons from [Lucide](https://lucide.dev/) website.
Finally, I modified [original Kepano's lightbox](https://github.com/kepano/obsidian-minimal-publish.git) with this code:
`const blockImages = Array.from(el.querySelectorAll('.internal-embed:not([src$="#icon"])'));`
#obsidian #css #code