# Change color of feature icons in Pricing Table

**URL:** <https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231>\
**Category:** Customization\
**Tags:** pricing-table\
**Created:** [September 1, 2025, 9:25am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231 "2025-09-01T09:25:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 1, 2025, 9:25am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/1 "2025-09-01T09:25:30Z")

</div>

@Max @Helga It’s not working on the duplicate widget I created. Take a look at the screenshot and let me know the solution for this. The CSS is added accordingly mentioned in this thread.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/8/086d4fcffc3ff74e8e8ac1963774c0218958a7e1.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 1, 2025, 11:15am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/3 "2025-09-01T11:15:53Z")

</div>

Hi there, @user2283 👋

The thing is that you’ve added the code for the wrong icon (Check Mark Circle instead of Stop icon).

If you add a code for the Stop icon, everything will work fine:

```auto
.es-features-feature-icon-stop {
  fill: blue !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/9/2938aaef6cf322a0d4e25656f1597bfbf7fe51c7.png)

  

Let me know if this explains things or if you have any questions left 😉

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 1, 2025, 2:39pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/4 "2025-09-01T14:39:59Z")

</div>

@Max It works. Can you help me how to change the colors of the white features section like on the left side dark color? Thank you!

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/0/f00895a2c1f725a41259af1de255eb20121ad200.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 1, 2025, 2:46pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/5 "2025-09-01T14:46:17Z")

</div>

Sure! You can change it in the Head Column section on the Appearance tab of your widget’s settings:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/b/5b69c69eda67685694ffb2f1ba0c167a9c511eb9.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/7/879844257f1e1650cc127a728911b1bfaab16283.png)

  

Let me know if you have any further questions 🙂

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 1, 2025, 2:47pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/6 "2025-09-01T14:47:43Z")

</div>

@Max No, I want to change the color of small text background where the pink icon, and 2/mon text is. All rows on the right side which are white now.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 1, 2025, 3:25pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/7 "2025-09-01T15:25:23Z")

</div>

Ah, I see. Apologies for misunderstanding!

You can change the background color of a specific row using this CSS code:

```auto
.es-features-feature:nth-child(2) {
  background-color: green;
}

```

Here you should set the order number of the row you’d like to customize:

![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/8/e860463045b61f687b62bb746bb5af4445042e3d.png)

  

Try it out and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 1, 2025, 4:05pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/8 "2025-09-01T16:05:41Z")

</div>

> [@Max](#):
>
> ```auto
> .es-features-feature:nth-child(2) {
> background-color: green;
> }
> 
> ```

@Max Where I can find what the color code of the rows now? Like one is dark now and one is lighter. Where I can get the color codes of that? Is there not any way in the widget setting to change the color from their rather then adding custom css for each because I’ve many tables.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 1, 2025, 6:00pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/9 "2025-09-01T18:00:15Z")

</div>

The color code for the darker background is rgba(17, 17, 17, 0.05), the 2nd color is just white.

You can find them on the Styles tab by inspecting the element through the DevTools:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/5/75ddac564dc7815c00e5a40bdf64512e38526839.png)

  

Unfortunately, there is no way to change the background color of the rows in the settings, but I agree that it would be great to have this option.

I’ve added this idea to the Wishlist on your behalf - [Option in the settings to change the background color of each row](https://community.elfsight.com/t/option-in-the-settings-to-change-the-background-color-of-each-row/139237). If more users upvote it, it might be considered in the future 🙂

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 11:17am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/10 "2025-09-02T11:17:03Z")

</div>

> [@Max](#):
>
> rgba(17, 17, 17, 0.05)

Thank you @Max There is white space/color at the bottom. Where it comes from? How I remove the extra space or change the color of the white part? I’ve attached the screenshot for the reference where red line is. Thank you

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/6/d674291fc6b6ec723e6a6179b4ef993fd27c3749.png)

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 11:19am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/11 "2025-09-02T11:19:17Z")

</div>

@Max In mobile view, it looks like this which is not good. Can you please assist me on this? Thank you

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/8/88c5aa121d58502e2ea2ee7b3de61416c0c19ec4.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 2, 2025, 11:57am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/12 "2025-09-02T11:57:27Z")

</div>

Sure! We’ve added this code to the Custom CSS field to fix both issues:

```auto
.es-features-feature:nth-child(4),
.es-column-container:before {
  background-color: #101d33;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/d/adebaf10582cc826629f3798c2cec7166f67b084.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/3/6392790674d416caf02ba68fe6eb0500b59f3d54.png)

Since there were some unpublished changes in your widget, we’ve saved d the code in the settings, but haven’t published it on your website.

If you like the result, feel free to click on the Publish button in your widget editor 🙂

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 12:02pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/13 "2025-09-02T12:02:04Z")

</div>

Thank you @Max . I’ve two questions now. Why there is extra space at the bottom and secondly can we add lines between the columns so for example after business light grey line which show separation between Business and Professional columns content? So it not look all on same?

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 1:15pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/14 "2025-09-02T13:15:33Z")

</div>

@Max Do we have any class to target the areas where I mark red lines to change the color of each?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/4/547aa0411e2fcbee9cb7a7eed97440bb6ec7e8d3.png)

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 1:16pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/15 "2025-09-02T13:16:57Z")

</div>

@Max Take a look at this as well. In my previous table of Local SEO, I’ve alternate colors where I’ve the features with icon and text but in this table it looks different. The code is same though. Can you help me with this please?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/c/6c9ae592406f22bf02bce05cf229ce9b04d48248.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 2, 2025, 1:39pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/16 "2025-09-02T13:39:37Z")

</div>

1. Here is the code to remove the padding at the bottom:

```auto
.es-column-padding-block {
  display: none;
}

```

1. This code will change the color of the dividers between columns to make them more noticeable:

```auto
.es-column-container:after {
  border-color: red !important;
}

```

1. Do you wan t to individually target each line within each column? For example:

Metadata Organization Business line - red

Metadata Organization Professional line - black

Metadata Organization Enterprise line - white

Is that something you’d like to achieve?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/0/d0618586957c93ae63352b28f0cf2e8ca05dad16.png)

1. Do you mean that the background of all lines is the same? If this is the case, you just need to set different color codes for the lines. Currently, it’s the same for all lines:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/7/e792c565194dac69b0b61630a34eae0b8fc08284.png)

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 1:50pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/17 "2025-09-02T13:50:32Z")

</div>

@Max Let me explain what I’m looking for. As you can see in the picture, there is a red checkmark I draw and I want the same color across the line in next 3 boxes where the pink icon is under Business, Professional and Enterprise. So the background color on Metadata Optimization Box, I want the same color to continue in next 3 boxes where the checkmark icon is. So I’ve alternate row colors.

Similarly, there is a yellow mark I draw and I want the same color across the line in next 3 boxes where the pink icon is under Business, Professional and Enterprise.

Red and Yellow are just on purpose to show you. The colors will be different and I can change that in css once you provide me.

I hope I explain better this time 🙂

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/c/4c07d4011beb3edf74ead1d7b04227768d39c267.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 2, 2025, 2:03pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/18 "2025-09-02T14:03:07Z")

</div>

For this, you just need to change different colors for each row. Currently, the codes for all lines have the same color:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/7/c74b93ada5e965c242e56e3b34b159d5a46cef6c.png)

  

If you change it, you’ll be able to make them different:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/4/a40a04a1bad6acedff796997aa801507c8a61578.png)

  

Please let me know if this explains things or if you have any questions left 🙂

---

<div class="post-metadata">

**Author:** ![user2283](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@user2283](https://community.elfsight.com/u/user2283)\
**Post date:** [September 2, 2025, 4:53pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/19 "2025-09-02T16:53:50Z")

</div>

> [@Max](#):
>
> ```auto
> .es-features-feature:nth-child(2) {
> background-color: green;
> }
> 
> ```

@Max I still see the gap on last row is bigger then above rows. Can you please assist me with this?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/6/06e3c476f9e7428b3b3f3b24acd57260796a0ec1.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 2, 2025, 5:26pm UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/20 "2025-09-02T17:26:06Z")

</div>

Please let me check it with the devs. I’ll update you tomorrow 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 3, 2025, 10:51am UTC](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231/21 "2025-09-03T10:51:03Z")

</div>

Thank you for waiting!

Please add this code to the Custom CSS field and let me know if it worked 🙂

```auto
.es-column-element {
  margin-bottom: 0;
}

```

[Next page](https://community.elfsight.com/t/change-color-of-feature-icons-in-pricing-table/139231.md?page=2)