SVG guide
How to Invert an SVG for Dark Mode
A dark-mode SVG needs enough contrast against a dark surface, but full inversion is not always the best design choice. Monochrome icons, multicolor illustrations, and brand marks need different treatment.
Start with the role of the graphic
Interface icons can often follow text color with currentColor. Logos may have fixed brand colors that should not be algorithmically inverted. Decorative illustrations can tolerate broader color changes, but still need a visual review.
- Monochrome icon: switch black paint to white or a light neutral.
- Brand mark: use an approved dark-background variant when one exists.
- Illustration: test all colors, gradients, and effects on the actual dark surface.
Transparency is separate from color
A transparent SVG background remains transparent when only shape colors are edited. Adding a background rectangle makes that background part of the file. That can be useful for a self-contained badge, but it is not required merely because the page is dark.
A small dark-mode example
This icon uses one dark fill. The dark-mode copy changes only that paint value and leaves the viewBox and path untouched.
<!-- Light surface -->
<path fill="#111827" d="M12 2 22 20H2Z"/>
<!-- Dark surface -->
<path fill="#f8fafc" d="M12 2 22 20H2Z"/>Review the result in context
Preview against the same background and at the same size used in the interface. Thin strokes, low-opacity edges, and filters can look acceptable in a large editor preview but become unclear at icon size.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to invert SVG colors for dark mode.
Related SVG guides
Turn black SVG artwork white by editing its fill and stroke values, with examples for inline SVG, files, and mixed-color artwork.
Compare CSS filter invert() with permanent SVG color edits, including output, reuse, transparency, and multicolor behavior.