How to change SVG icon color in Elementor V4

The new SVG element in Elementor V4 has no icon color setting, so at first it looks like you can’t recolor an icon at all. I found the answer while building a V4 template: the color lives in Typography, and it works as long as the icon file plays along. Here’s where the color and size are set, why some SVGs refuse to change, and the quick fix in the file. The demo above shows it with a plain black check circle: change the Text color and the size, and hover the icon.

Tested in the Elementor V4 SVG element, October 2026, with the code references checked against Elementor 4.3.4.

How do you change an SVG icon’s color in Elementor V4?

Set the SVG element’s Text color. Elementor draws the SVG inline and sets its fill to currentColor, which means “use this element’s text color”, so whatever you choose in Typography becomes the icon color.

1. Add the SVG element and upload your icon under Content > SVG.
2. Open the Style tab and expand Typography.
3. Set Text color. Pick a color Variable rather than a hex value, so every icon follows the brand color and changes with it.

You can see the line that does it in Elementor’s source code: it sets fill="currentColor" on the <svg> tag, and nothing else. That one detail explains everything below.

If you’re building V4 pages, the Elementor V4 components in Element UI, the Elementor component library, are built on atomic elements, and many of their icons use this same SVG element.

How do you change the icon’s size?

Use Style > Size > Width and Height. Elementor makes the SVG fill its element, so the element’s size is the icon’s size. The default is 65 by 65 pixels, which is big for most layouts. For the icons in a feature list, I set 28 by 28.

Set both values. If you change only the width, the element stays 65 pixels tall and the icon sits in a box taller than it needs, which throws off the alignment with the text beside it.

Once you’ve set the color and size on one icon, save them as a class (an icon class, say) and apply it to every icon on the site. Then a size or color change is one edit instead of one per icon. If classes are new to you, Elementor V4 and the atomic editor explains why they’re the biggest change in V4.

How do you add a hover color?

In the Style tab, switch the state from Normal to Hover and set a second Text color. The icon changes color on hover, the same way text would. Elementor also applies hover styles to keyboard focus, so an icon used as a link gets the same color when someone tabs to it.

Why won’t my SVG icon change color?

Because the file sets its own color on the shapes inside it. Elementor only changes the color on the outer <svg> tag. A shape with no color of its own inherits it; a shape with its own color keeps it, and beats the text color.

That’s why “use a black icon” works as a rule of thumb. An SVG with no colors in it at all draws in black by default, and that kind of black is the one that recolors. A file that writes fill="#000000" on every shape looks identical, but it stays black.

What’s in the SVG file	Does Text color change it?
No colors anywhere (draws black by default)	Yes
A color on the outer <svg> tag only	Yes, Elementor replaces it
A color on each shape (fill="#000000", fill="black" or a style with fill)	No, it stays that color
Several colors (a logo or illustration)	No, it stays as drawn
A line icon with fill="none" on the outer tag	It fills in solid, see below

Icons exported from design tools can write a color on every shape, even when that color is black. Icon sets made for the web usually don’t. You can’t tell by looking at the icon, only by opening the file.

How do you fix an SVG that won’t change color?

Delete the colors from the shapes inside the file, so they inherit the text color again. It takes a couple of minutes in any plain text editor, needs no design tool, and the icon looks exactly the same afterwards until you pick a Text color.

1. Open the SVG file in a code or text editor.
2. Find the fill and stroke colors on the shapes: <path>, <circle>, <rect>, <g> and so on. Also look for style="fill: …".
3. Delete them, or replace each color with currentColor. Leave fill="none" where it’s on a shape.
4. Save, upload the new file, and select it in the SVG element.

Keep a copy of the original first. And leave multi-color logos alone: they’re meant to keep their colors.

Line icons that fill in solid

Line icons (outlines drawn with strokes) usually turn their fill off on the outer tag and color the stroke with currentColor. Elementor then replaces that fill with the text color, so the shapes fill in solid. The fix is to move the “no fill” setting inside, where Elementor doesn’t touch it:

<!-- Before: fills in solid in the V4 SVG element -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="9" />
</svg>

<!-- After: stays a line icon and follows Text color -->
<svg viewBox="0 0 24 24">
  <g fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="9" />
  </g>
</svg>

Outline icons drawn as filled shapes (common in stock icon sets) don’t need this. They have no fill to turn off, so they recolor like any solid icon.

Where Element UI fits

The V4 components in Element UI are built with atomic elements, and many use the SVG element for their icons. They’re lightly styled with placeholder content, so once you’ve pasted one, you restyle its icons the way this post describes: with Text color, or a Variable that matches the brand, and Width and Height for size. How to use the V4 components covers pasting them in.