design basics, explained
Icons in dark mode: what changes and how to get it right
Icons that look perfect on white can vanish, glow or look clumsy on a dark screen. Here is what actually changes, in plain words, and a simple checklist to get it right.
- In dark mode, icons must switch to a light colour, and they look slightly bolder than the same icon on white, because bright shapes on dark spread a little in your eye.
- Use icons drawn with
currentColor: they take the text colour, so when your page turns dark, every icon follows without a second set of files. - Check contrast on the dark background too: meaningful icons need at least 3:1 (WCAG 2.2). A cobalt blue that scores 5.17:1 on white drops to 3.62:1 on dark grey.
- Prefer a dark grey background and an off-white icon over pure black and pure white. It is easier on the eyes and looks less harsh.
- Watch out for black PNGs on transparent backgrounds: on a dark page they almost disappear (about 1:1 contrast). Use SVG, or a mid-tone or light PNG.
On this page 9 sections
In dark mode, an icon has to switch from a dark colour to a light one, keep enough contrast with the new background, and it will look a touch bolder than it did on white. The easiest way to get this right is to use SVG icons that follow the text colour (currentColor), test them on the actual dark background, and never ship black PNG icons to a dark page.
That is the whole idea. The rest of this guide explains each part in plain words, with real contrast numbers and a quick testing checklist you can run in five minutes.
What actually changes when icons go dark?
Three things change at once, and it helps to keep them apart:
- The colour flips. Dark icons on a light page become light icons on a dark page. If an icon cannot change colour, it is in trouble.
- The contrast changes. A colour that stands out on white might blend into dark grey, and the other way round. Every colour needs checking again.
- The weight seems to change. The very same icon looks slightly thicker and brighter on a dark background. More on that in the next section.
Light page, dark icons
Dark page, icons stuck on black (1.01:1)
Dark page, icons follow the text (14.87:1)
Why do icons look bolder on a dark background?
It is a quirk of your eyes, not your screen. Light spreads a little as it passes through the eye, so a bright shape on a dark background looks slightly bigger than an identical dark shape on a light background. This is called the irradiation illusion. Galileo wrote about it in 1632, and the scientist Hermann von Helmholtz gave it its name in the 1860s.
For icons, that means a thin white line on black reads heavier than the same black line on white. There is a related effect called halation: some people, especially the many who have astigmatism, see bright lines and letters on dark backgrounds as slightly glowing or blurred.
You do not need to redraw anything. Two small tweaks help:
- Use an off-white, not pure white. A light grey like
#E5E5E5on a dark grey background still has huge contrast (14.87:1) and glows less than pure white (18.73:1). - Consider a slightly lighter line. Our Line style style uses a 1.75 px outline. If it feels heavy in your dark theme, the editor on every icon page lets you set the line thickness anywhere from 0.75 to 3.
How do you make icons follow light and dark mode automatically?
Use icons that are drawn with currentColor. In plain words, that setting means “use the same colour as the text around me”. All three everyday with icons styles, and most of the creative ones, paint their lines this way, so when your page’s text turns light for dark mode, every icon turns light with it. No second set of files, no swapping images.
On a website, dark mode is usually switched on with a small CSS rule that listens to the visitor’s system setting. You only change the text and background colours, and the icons follow:
:root { color: #1A1A1A; background: #FFFFFF; }
@media (prefers-color-scheme: dark) {
:root { color: #E5E5E5; background: #121212; }
}Want to see it live? This Journal has a light and dark switch at the top of the page. Flip it and watch every icon in this article follow. If you are setting up icons for the first time, our guide to adding icons to a website and the HTML guide show the copy and paste route, and how to change an icon’s colour covers every app.
How much contrast do icons need in dark mode?
Exactly as much as in light mode. The web accessibility standard, WCAG 2.2, asks for at least 3:1 contrast between an icon and its background when people need the icon to understand the page or use a button. Text needs 4.5:1. Apple’s guidelines for apps are stricter: no lower than 4.5:1 between colours, and 7:1 is the target for small text in custom colours.
The surprise is that colours do not behave the same way on both backgrounds. Here are real measurements against white and against #121212, the dark grey that Google’s Material Design recommends as a dark surface:
| Icon colour | On white | On dark grey #121212 | Works in dark mode? |
|---|---|---|---|
Near black #111111 | 18.88:1 | 1.01:1 | Invisible |
Cobalt blue #2F5BFF | 5.17:1 | 3.62:1 | Passes 3:1, weaker |
Mid grey #808080 | 3.95:1 | 4.74:1 | On both |
Tomato #FF5A36 | 3.10:1 | 6.04:1 | Better on dark |
Light grey #9CA3AF | about 2.5:1 | 7.38:1 | Dark only |
Off-white #E5E5E5 | about 1.3:1 | 14.87:1 | Dark only |
Material Design also suggests softer, less saturated colours on dark surfaces, because very bright, saturated colours can seem to vibrate against dark grey. In practice: if your brand blue looks harsh or dim in dark mode, use a lighter, slightly greyer version of it there.
Which icon styles hold up best in dark mode?
Every one of our 500 icons comes in 20 styles (10,000 SVGs), and most of them take their outline colour from the text. But they do not all feel the same on a dark page. We rendered them on dark backgrounds and here is our honest read:
| Style | In dark mode | Why |
|---|---|---|
| Line style | Great | Clean outline in your text colour. Looks a little bolder, as explained above. |
| Solid style | Great | Strong filled shapes. The small cut-out details show the background, so they stay crisp. |
| Duo style | Great | The soft tint is the icon colour at low strength, so it turns into a subtle glow on dark. |
| Sketch style | Good | Hand-drawn lines read like chalk on a board. |
| Blueprint style | Good | Light lines on dark is how real blueprints look. Use it at 32 px or larger. |
| Sticker style | Good | The white die-cut border makes each sticker pop off a dark page. |
| Gloss style | Different | Its shine is cut out of the shape, so on dark the highlights show the background and read as grooves. |
| Engrave style | Large only | Fine hatching lines can merge at small sizes. Keep it big. |
For the bigger picture of what each style is for, see icon styles explained.
What happens to multi-colour icons and palettes in dark mode?
Multi-colour styles such as Sticker style, Kawaii style, Glass style and Retro style have two kinds of colour. In kawaii, retro and pixel, the outline (we call it the ink) follows your text colour, so it flips in dark mode like any other icon. Sticker keeps a dark ink outline inside its white die-cut border, which is exactly why it reads on any background. The fill colours come from a palette, and those stay the colours you chose. They do not darken by themselves. A few richer styles, such as Luxe style and Skeuo style, use fixed material colours like gold, brass and leather that look the same on any background.
Most palettes are designed to read on white, and many look fine on dark too. For dark pages, with icons gives every icon 20 to 30 hand-picked palettes, and every single icon has at least one marked “for dark pages”, usually a neon or midnight set. You can filter for them in the palette picker, and preview any icon on a dark background before you download.
On a website you can also swap the palette colours for dark mode, because each one is a named CSS setting:
@media (prefers-color-scheme: dark) {
:root { --with-glass-back: #7C9CFF; }
}Sticker on a light page
Sticker on a dark page
Why do PNG icons disappear in dark mode?
A PNG has its colour baked in. A black icon on a transparent background looks great on a white slide, but drop it on a dark page and it nearly vanishes: black on #121212 is about 1:1 contrast. This is the most common dark mode problem we see, especially in Notion pages, email signatures and apps that switch theme for you.
Use SVG wherever you can, so the icon follows the theme. Where you must use PNG, pick a mid-tone that passes on both backgrounds, or keep a light and a dark version.
Upload a black PNG with a transparent background to a page that might be viewed in dark mode. Half your readers will see an empty space.
Every icon page in with icons lets you choose the PNG colour before you download, so making a white or mid-grey version takes seconds. Our Notion guide and email signature guide cover those two cases, and SVG vs PNG icons explains the file types.
How should you test icons in dark mode?
- 1Switch the whole system
Turn on dark mode in your phone or computer settings, not only in one app. That is how real visitors arrive.
- 2Look at real size
Check icons at the size people see them, like 16 to 24 px in menus. Problems hide when you zoom in.
- 3Measure the risky colours
Run brand colours, greys and disabled states through a free contrast checker against the dark background. Aim for 3:1 or more.
- 4Check every state
Hover, selected, disabled and error icons often use special colours. Each one needs a dark version.
- 5Try accessibility settings
Apple suggests testing dark mode with Increase Contrast and Reduce Transparency turned on, separately and together.
- 6Hunt for PNGs
Scroll through docs, emails and help pages for black PNG icons that went missing.
- 3:1
- minimum contrast for meaningful icons
- #121212
- Material’s suggested dark surface
- 1.01:1
- black icon on dark grey
- 14.87:1
- off-white #E5E5E5 on dark grey
Dark mode is not a nice extra any more. Plenty of people use it all day, while others find light mode easier to read: Nielsen Norman Group found that people with normal vision usually read small text better in light mode. That is why the best answer is to support both and let people choose. For more on making icons work for everyone, read our guide to accessible icons.
Frequently asked questions
Why do my icons disappear in dark mode?
Usually because they are black PNGs with a transparent background. On a dark page, a black icon has almost no contrast (about 1:1), so it vanishes. Use an SVG that follows the text colour, or download the PNG in a light or mid-tone colour.
Do icons need to be redesigned for dark mode?
Not redesigned, but rechecked. The same drawing works if its colour switches to light and it keeps enough contrast. Some designers use a slightly thinner line or an off-white colour in dark mode, because light shapes on dark look a little heavier.
What colour should icons be in dark mode?
An off-white or light grey (for example #E5E5E5) on a dark grey background works for most interface icons. Coloured icons often need a lighter, softer version of the light-mode colour to keep enough contrast.
How much contrast do icons need in dark mode?
The same rule as light mode: WCAG 2.2 asks for at least 3:1 between a meaningful icon and its background. Apple asks app makers for at least 4.5:1 between colours and suggests aiming for 7:1 for small text.
Should dark mode use pure black backgrounds?
Many guidelines suggest dark grey instead. Google’s Material Design recommends #121212 as the base dark surface, partly because shadows and depth are easier to see on grey than on black.
Do multi-colour icons work in dark mode?
Yes, but check them. In with icons, most multi-colour styles take their outline from the text colour and their fills from a palette. Pick a palette marked for dark pages, or set the palette colours in your dark theme.
Sources and notes
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum)
- Apple Human Interface Guidelines: Dark Mode
- Material Design (M2): Dark theme
- Wikipedia: Irradiation illusion
- Nielsen Norman Group: Dark Mode vs. Light Mode: Which Is Better? (2020)
- Bureau of Internet Accessibility: Dark Mode Can Improve Text Readability, But Not for Everyone
- MDN Web Docs: prefers-color-scheme
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.