# Using SVG icons in help documentation so that it's visually compatible with Dark Mode

**URL:** https://meta.discourse.org/t/using-svg-icons-in-help-documentation-so-that-its-visually-compatible-with-dark-mode/242676
**Category:** General
**Created:** [October 22, 2022, 4:14pm UTC](https://meta.discourse.org/t/using-svg-icons-in-help-documentation-so-that-its-visually-compatible-with-dark-mode/242676 "2022-10-22T16:14:56Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Kayla](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kayla/32/128523_2.png) [@Kayla](https://meta.discourse.org/u/Kayla)
#### Post date: [October 22, 2022, 4:14pm UTC](https://meta.discourse.org/t/using-svg-icons-in-help-documentation-so-that-its-visually-compatible-with-dark-mode/242676/1 "2022-10-22T16:14:56Z")

</div>

After [enabling automatic dark mode switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593), I noticed that many of my screenshots explaining individual user interface buttons looked terrible with their white backgrounds. I attempted to reuse the svg code that the actual interface is using but that didn’t work. I found:

> [@How to include fontawesome icons in posts?](https://meta.discourse.org/t/how-to-include-fontawesome-icons-in-posts/31130):
>
> I’ve seen this in the past and would love to be able to include fontawesome icons on a regular basis. Can’t find it! For right now if someone could help me with a hack I’d be grateful. I want to embed the fa-comments, fa-search and fa-sandwich (or whatever it’s called) in a post explaining discourse features. Down the road.. perhaps there’d even be appetite for a plugin to support fa tags as emoji? Came across this interesting page:

but using downloaded SVG files directly from Font Awesome also didn’t work and the GitHub link to icons from that conversation wasn’t a perfect match for the current Discourse UI. Happily I stumbled on:

> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/23):
>
> Right, using SVGs as a linked image unfortunately means you can’t control the fill color. As you discovered, CSS filters are one way to overcome this. What was missing was the height/width attribute within the SVG file. If you open an SVG in a text editor, you’ll see this: \<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" width="25" height="25" viewBox="0 0 576 512"\> \<path fill="currentColor" d="M48…

This helped me realize yes, width & height is missing from the Font Awesome downloads. I found the [v5 icons at Font Awesome](https://fontawesome.com/v5/search) and tweaked those svg files. A height of 17px worked well for the post action buttons (14px for the editor buttons) and whatever width that made sense per the `viewBox` setting; an [aspect ratio calculator](https://andrew.hedges.name/experiments/aspect_ratio/) came in handy at times.

Besides needing to add the `width` and `height`, I also needed to add a `fill` to the path. I opted to go with `fill="currentColor"` instead of a static color as I considered the surrounding text color an excellent default. However, I still wanted the icons to match the UI button colors and not the surrounding text, and I found I could keep the file upload `![alt](file)` syntax and still target these specific svgs by wrapping them in a html span (something regular users wouldn’t be apt to do) and adding

```plaintext
p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%); 
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

```

to the css. This specific css mimics the `var(--primary-low-mid)` when the primary color is set to black in our light color scheme and #eee in our dark color scheme, and also accounts for an existing wrapping span in the editor preview panel. You can use a [css filter generator](https://codepen.io/sosuke/pen/Pjoqqp) to figure out how to change svg color when used this way. (Depending on your color schemes, you may want to double-check how it looks if a user _doesn’t_ have automatic dark mode switching option saved in their preference settings yet has their device _in_ dark mode, as there’s an in-between state that can occur when using `@media (prefers-color-scheme: dark)` in your css.)

Hopefully this discovery process helps someone else! If you want to download and reuse/tweak the icons I made for this purpose (because this was somewhat time consuming), you can grab them from the tutorial pages I’ve completed so far: [post actions & reactions](https://www.infiniteconversations.com/t/post-actions-reactions/5470), [basic post styling](https://www.infiniteconversations.com/t/how-to-reply-basic-post-styling-and-mentions/5463), [advanced post styling](https://www.infiniteconversations.com/t/advanced-post-styling/5475), and [poll builder](https://www.infiniteconversations.com/t/create-a-poll-that-others-can-vote-on/5494). (I only replaced the individual icons and kept the light color scheme screenshots for the contextual images, which are a mix of images taken from the help docs here at meta and screenshots I made of our specific site.)