# Setting SVG Fill Color in a Component?

**URL:** <https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017>\
**Category:** Elements API\
**Created:** [July 20, 2025, 11:42pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017 "2025-07-20T23:42:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 20, 2025, 11:42pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/1 "2025-07-20T23:42:18Z")

</div>

I have been building a cookie consent pop-up that includes an embedded SVG. Currently, the fill color for this SVG is the only part of the pop-up that is hard-coded, and I’d like to be able to set the color from a property.

I have created the property, but every time I try, it fails to set the fill color.

Any ideas out there?

```auto
<svg class="-mb-28 ml-4 h-28 w-28"
viewBox="0 0 24 24"	
xmlns="http://www.w3.org/2000/svg" 
fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd"
>
<path fill="#aeb0a9" fill-opacity="0.4" d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z"></path>
 </svg>

```

The `fill="#aeb0a9"` is what I’m trying to set, but I’m doing something wrong getting the color from the color property.

---

<div class="post-metadata">

**Author:** ![SmallPotato](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/smallpotato/32/26096_2.png) [@SmallPotato](https://forums.realmacsoftware.com/u/SmallPotato)\
**Post date:** [July 21, 2025, 2:14am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/2 "2025-07-21T02:14:59Z")

</div>

Yeah, SVG’s can be nifty little buggers 🐞. Using inline styles instead of inline attributes might do the trick.

````auto
<svg class="ml-4 h-28 w-28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" style="fill: #aeb0a9; fill-opacity: 0.4;">
    <path d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z"></path>
</svg>```
````

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 4:37am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/3 "2025-07-21T04:37:57Z")

</div>

@handshaper Robin is this what you need, you either enter the color or hex, or I converted hex to tailwind colors, or I asked AI to provide me with the nearest colors, I then created the properties UI

the text field is just enter the hex #238912 etc

You cant use tailwind colors

they are pretty close

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2025, 5:49am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/4 "2025-07-21T05:49:33Z")

</div>

@upssjw Aloha Steve, so what you are saying is that you can’t using the standard Elements color picker because you need to enter a HEX color value, correct?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 7:09am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/5 "2025-07-21T07:09:00Z")

</div>

Yes you need hex, you can have my converter if it’s not over the top for your project, inside this code

In work now though

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 21, 2025, 7:28am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/6 "2025-07-21T07:28:58Z")

</div>

Hi @handshaper

The way I’d do this, for this SVG at least, is by removing the `fill` attribute on the `<path>` and then add a `fill-{color}-{brightness}` class to the `<svg>`, like so:

```auto
<svg
  class="-mb-28 ml-4 h-28 w-28 fill-red-500"
  viewBox="0 0 24 24"	
  xmlns="http://www.w3.org/2000/svg" 
  fill-rule="evenodd"
  stroke-linejoin="round"
  stroke-miterlimit="2"
  clip-rule="evenodd"
>
  <path
    fill-opacity="0.4"
    d="M12,1 C12.2108325,1 12.4216651,1.04320503 12.6141643,1.12529458 L21.2445485,4.57737628 C22.252878,4.97918303 23.0045418,5.91673213 22.9999793,7.04870385 C22.9770419,11.3346426 21.107049,19.1763551 13.2099954,22.7407698 C12.4445817,23.0864101 11.5554183,23.0864101 10.7900046,22.7407698 C2.89295103,19.1763551 1.02295809,11.3346426 1.00002066,7.04870385 C0.99545819,5.91673213 1.74712202,4.97918303 2.75545155,4.57737628 L11.390419,1.12529458 C11.5783349,1.04320503 11.7891675,1 12,1 Z M12,3.88609584 L12,20.2219167 C18.3249761,17.3315004 20.0253864,10.9414768 20.0666362,7.10919089 L12,3.88609584 C12,3.88609584 12,3.88609584 12,3.88609584 Z">
  </path>
 </svg>

```

You can [see this in action on Tailwind Play](https://play.tailwindcss.com/RdCdhEHoym).

There are a couple of other ways to solve this, but I think this is the easiest solution in this instance.

If you’re building a custom component you can of cause hook up a color control to dynamically set the `fill-red-500` class, let me know if you need help with that 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2025, 7:49am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/7 "2025-07-21T07:49:40Z")

</div>

Aloha @ben Yes, I’m doing this in a custom component, so I’d be very interested to see how to hook up the standard color control to set the fill color as that will be much more user friendly. I currently just have a text field into which the HEX color code is entered, which works but would be more prone to errors if someone mistypes.

I’d also really like to be able to specify the OPACITY for the SVG as well.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 8:13am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/8 "2025-07-21T08:13:18Z")

</div>

Like that, means you could use fill-red-500 as an id in elements and use the json Color ?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 21, 2025, 8:51am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/9 "2025-07-21T08:51:20Z")

</div>

Sure thing! Here’s a video showing how to do a custom component for your SVG with color and opacity controls (and sizing and margin 'cos… why not!) 🙂

Here’s a [download link for the project](elementsapp://downloadDocument/IoiCaFrTCNZO).

Enjoy 😃

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2025, 4:28pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/10 "2025-07-21T16:28:12Z")

</div>

@ben This looks great, except I cannot get the MARGIN settings to work as I’m depending on being able to set a NEGATIVE margin in order to move the SVG where I want it. I have integrated your code with mine and everything works as expected except the margin.

I’ll PM you the project with the code if you want to take a look.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 6:29pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/12 "2025-07-21T18:29:09Z")

</div>

@ben @handshaper

I think this adds padding and not margin

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 6:39pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/13 "2025-07-21T18:39:03Z")

</div>

@handshaper I added mode margin

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2025, 8:02pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/14 "2025-07-21T20:02:56Z")

</div>

Great Steve, I did also get this all integrated and also got “opacity” added for the background color. I needed to add your `"mode": "margin",` code to Ben’s in order to get the margins to work with negative values. Thanks for that catch.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 8:08pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/15 "2025-07-21T20:08:23Z")

</div>

I started working on this but got bored

[elementsapp://downloadDocument/208W7k3WGkOf](elementsapp://downloadDocument/208W7k3WGkOf)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 21, 2025, 8:13pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/16 "2025-07-21T20:13:54Z")

</div>

This must auto revert to p, I used my name and it still used p and added padding, only the {{value}} is recognised, the “mode” sets m but without is p

````auto
  {
                    "title": "Margin",
                    "id": "margin",
                    "format": "steve-{{value}}",
                    "themeSpacing": {
                        "default": {
                            "base": {}
                        }
                    }
                }```
````

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 21, 2025, 10:25pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/17 "2025-07-21T22:25:36Z")

</div>

> [@upssjw](#):
>
> This must auto revert to p, I used my name and it still used p and added padding, only the {{value}} is recognised, the “mode” sets m but without is p
> 
> ```auto
> {
> "title": "Margin",
> "id": "margin",
> "format": "steve-{{value}}",
> "themeSpacing": {
> "default": {
> "base": {}
> }
> }
> }
> 
> ```

@ben Any thoughts on why the properties for the margins are in fact setting the padding instead. Steve figured out a way to fix it by setting the mode, but we are curious why this is not working as expected?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 22, 2025, 7:35am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/18 "2025-07-22T07:35:13Z")

</div>

Steve has figured it out — I should have been using `"mode": "margin"` instead of `format`.

The `format` property has no effect on the standard themeSpacing control.

**Note** that `format` does work on themeSpacing when combined with `"mode": "single"`.

Hope that makes sense! Let me know if you have more questions 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 22, 2025, 8:06am UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/19 "2025-07-22T08:06:39Z")

</div>

@ben your code used format, it did not adjust margin but padding even though you used m-{{value}} it reverted to padding  
Is that wrong

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 22, 2025, 6:47pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/20 "2025-07-22T18:47:19Z")

</div>

@ben, I tried using `"mode": "single"` for the margin, but it did not work. The only thing that worked is setting it to `"mode": "margin"`.

Does the format piece of code still need to be there, or can it be deleted?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 22, 2025, 6:54pm UTC](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017/21 "2025-07-22T18:54:56Z")

</div>

Delete and try it not tried yet working so away from my Mac

[Next page](https://forums.realmacsoftware.com/t/setting-svg-fill-color-in-a-component/49017.md?page=2)