---
title: How do I edit the icon color in Quote module?
description: Learn how to customize the icon colors in the Quote module using CSS while maintaining your global theme styles.
---

[Knowledge Base](https://www.stuff-n-matters.com/knowledge-base)

# [How do I edit the icon color in Quote module?](https://www.stuff-n-matters.com/knowledge-base/how-do-i-edit-the-icon-color-in-quote-module)

 Written by [HubSpotted](https://www.stuff-n-matters.com/knowledge-base/author/hubspotted) | Jun 18, 2026 11:29:54 AM

Those colors are controlled by Global theme styles > Secondary color / Secondary accent color / Contrast detail foreground color.

If you want to keep these colors but still want to change the icon colors, you can do it via the following CSS:

```
<style>  .focus_module_quote_icon {    background-color: #YOUR_COLOR_1;    box-shadow: 0px 5px 0px 0px #YOUR_COLOR_2;  }  .focus_module_quote_icon svg {    fill: #YOUR_COLOR_3;  }</style>
```

[Back to Knowledge Base](https://www.stuff-n-matters.com/knowledge-base)

[View full post](https://www.stuff-n-matters.com/knowledge-base/how-do-i-edit-the-icon-color-in-quote-module)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "HubSpotted"
  },
  "dateModified" : "2026-06-18T11:29:54.102Z",
  "datePublished" : "2026-06-18T11:29:54Z",
  "headline" : "How do I edit the icon color in Quote module?",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.stuff-n-matters.com/knowledge-base/how-do-i-edit-the-icon-color-in-quote-module",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Knowledge Base"
  }
}
```