Custom Social Icon Images Flipping Colors in Dark Mode

Question

I’m having an issue where my custom social icons (which are transparent .png images) are being overridden and color flipped in dark mode clients. Other images of the same type, such as brand logos, do not have this issue. I have tried creating a template from scratch, and using a table section rather than the social icons block, and the result is the same.

When the section background is blue or orange, I want the icons and text to always appear white, as it is the most legible. My confusion comes from the fact that the text in the footer is not being flipped from white to black, and yet somehow static images are being affected and having their colors flipped.

Is this some dark mode magic that I can’t change, or is there something that I can do on my end? I’m at my wits end on how a custom raster image is being seemingly replaced with an alternate version that haven’t included and can’t see.

I’ve attached screenshots from the template builder, a light mode email client, and a dark mode client. The first three blocks (orange, blue, white) are using white / black .png images and the last three use the Klaviyo social links icons in white or black. I understand why the Klaviyo icons might be swapped, as they could be vector or include a dark mode alternative, but how white images are turning black I have no idea.

Klaviyo Builder:

The appearance of the social blocks in the Klaviyo template builder.

The style section of the first two custom social links blocks, with uploaded icons.

The style section of the fourth and fifth blocks, with Klaviyo default icons.

Light Mode Client:

A screenshot taken from an email client in light mode, with the correct colors.

Dark Mode Client:

A screenshot from an email client using dark mode. Icon colors on the orange and white blocks are flipped, while the text remains the same.

Any suggestions on how to remedy this?

zacfromson · Accepted Answer

Hi there - great question and thanks for sharing the visuals!

This issue typically happens because email clients that support dark mode (like Apple Mail or Outlook) automatically invert colors or apply filters to image backgrounds, especially when the image uses transparent PNGs or doesn’t have a defined background.

Solution: Use Fully Opaque Backgrounds + Inline Styling

To prevent your social icons from inverting or flipping colors in dark mode:

1. Add a solid background behind your icons

Ensure your icons are saved with a solid background (e.g., white or brand color) rather than transparent. This prevents email clients from auto-adjusting the color in dark mode.

2. Disable dark mode rendering tricks (to the extent possible)

While Klaviyo doesn’t give direct access to email HTML for advanced media queries, you can:

Use JPG or non-transparent PNGs for social icons
Upload separate icon versions optimized for dark mode and light mode (less ideal unless targeting specific segments)

3. Apply background color inside the content block

In the image block settings, set a background color that matches the icon’s background to reduce contrast flipping:

Background color (in block): set this to match your icon’s base
Padding: make sure padding exists so background color shows beyond just the icon image itself

Alternative: Use Klaviyo’s Native Social Links Block

If you’re using custom icons for design reasons, that’s totally fine — but Klaviyo’s native social links block is less likely to run into this issue as it uses HTML-based icons rather than images, and adapts better in dark mode.

vuepointad · Answer

​@zacfromsonThank you for the reply and suggestions!I just created alternate versions of the icons using .jpg files with opaque colored backgrounds, but unfortunately I’m still seeing the same behavior. All colors are set to the same HEX value, and I’veadded ablock background color for the social link section, but the icon colors (and even the background color of the images) are still flipped. Interestingly, the orange / blue colors of the section and the icons becomedifferent values, even though they were the same in the editor.Again, the top three sections (orange, blue, and black) use custom uploaded icons, while the bottom three use the Klaviyo default social icons.Klaviyo Editor:Preview of the social sections within a Klaviyo template.Dark Mode Preview:The social sections as rendered within an email client using dark mode.

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded