GitHub user dosubot[bot] added a comment to the discussion: How can ou change the svg icon color
<!-- Answer -->
There are a few ways to change SVG icon colors in Superset:
**1. Using the `iconColor` prop** (for icon components):
```typescript
<Icons.FilterOutlined iconColor={theme.colorPrimary} />
```
**2. For `button > span > svg` structures**, use Emotion styled components with
the `color` property, which cascades to child SVGs:
```typescript
const StyledButton = styled.button`
color: ${({ theme }) => theme.colors.grayscale.base};
&:hover {
color: ${({ theme }) => theme.colorPrimary};
}
`;
```
**Common theme color properties:**
- `theme.colorPrimary` - Primary accent
- `theme.colorSuccess` / `theme.colorWarning` / `theme.colorError` - Status
colors
- `theme.colors.grayscale.base` - Grayscale variants
Superset's [style
guidelines](https://github.com/apache/superset/wiki/Component-Style-Guidelines-and-Best-Practices)
recommend always using theme variables over hardcoded colors for
maintainability and theming support.
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/5120def3-0934-47a3-a373-e35a3c370392?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=There%20are%20a%20few%20ways%20to%20change%20SVG%20icon%20colors%20in%20Superset%3A%0A%0A%2A%2A1.%20Using%20the%20%60iconColor%60%20prop%2A%2A%20%28for%20icon%20components%29%3A%0A%60%60%60typescript%0A%3CIcons.FilterOutlined%20iconColor%3D%7Btheme.colorPrimary%7D%20/%3E%0A%60%60%60%0A%0A%2A%2A2.%20For%20%60button%20%3E%20span%20%3E%20svg%60%20structures%2A%2A%2C%20use%20Emotion%20styled%20components%20with%20the%20%60color%60%20property%2C%20which%20cascades%20to%20child%20SVGs%3A%0A%60%60%60typescript%0Aconst%20StyledButton%20%3D%20styled.button%60%0A%20%20color%3A%20%24%7B%28%7B%20theme%20%7D%29%20%3D%3E%20theme.colors.grayscale.base%7D%3B%0A%20%20%26%3Ahover%20%7B%0A%20%20%20%20color%3A%20%24%7B%28%7B%20theme%20%7D%29%20%3D%3E%20theme.colorPrimary
%7D%3B%0A%20%20%7D%0A%60%3B%0A%60%60%60%0A%0A%2A%2ACommon%20theme%20color%20properties%3A%2A%2A%0A-%20%60theme.colorPrimary%60%20-%20Primary%20accent%0A-%20%60theme.colorSuccess%60%20/%20%60theme.colorWarning%60%20/%20%60theme.colorError%60%20-%20Status%20colors%0A-%20%60theme.colors.grayscale.base%60%20-%20Grayscale%20variants%0A%0ASuperset%27s%20%5Bstyle%20guidelines%5D%28https%3A//github.com/apache/superset/wiki/Component-Style-Guidelines-and-Best-Practices%29%20recommend%20always%20using%20theme%20variables%20over%20hardcoded%20colors%20for%20maintainability%20and%20theming%20support.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/38446)
GitHub link:
https://github.com/apache/superset/discussions/38446#discussioncomment-16010635
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
