# How do I put gradient on thin icons?
**URL:** https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429
**Category:** Development
**Created:** [March 26, 2023, 1:00am UTC](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429 "2023-03-26T01:00:51Z")
**Posts on this page:** 7
**Page:** 1
I tried everything, I can’t put gradient degrade on icons like these here
---
Hi,
From what I read in [Gradients in SVG - SVG | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients), you must add `` to the SVG.
Others resources:
- [Gradient fills for SVG icons](https://fvsch.com/svg-gradient-fill)
- [SVG Gradients](https://jenkov.com/tutorials/svg/svg-gradients.html)
What you can do is create a hidden SVG in your [theme/component](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) to define your gradients:
```html
```
Then, in your CSS, you define the color, and you target what SVG elements you want to `fill`:
```css
/* defines gradients color */
#my-gradient-1 {
--color-stop-1: #a770ef;
--color-stop-2: #eda58b;
}
#my-gradient-2 {
--color-stop-1: #2980b9;
--color-stop-2: #6dd5fa;
--color-stop-3: #ffffff;
}
.svg-icon, .svg-icon-title {
/* targets all svg icons */
fill: url(#my-gradient-1) var(--header_primary-low-mid);
/* targets only chat icon */
&.d-icon-d-chat {
fill: url(#my-gradient-2) var(--header_primary-low-mid);
}
}
```
Note: the second value of `fill` is a fallback color.
I did not test extensively; this is an example of how you can customize.
Feel free to check the documentation to make more complex gradients.
I hope that helps!
---
Hello everything is fine? thank you very much for answering me
so I had tried this method once, but I couldn’t understand it properly (even more so because I don’t understand English) but it didn’t work, I tried the way you showed me and this time the icons change, but they don’t change for the gradient color, they just change to a gray color, well, let me clear these doubts to see if it is not such an error, what is the name of the text file that you saved? and what name did you put when uploading the theme? where did you put the css, in the css desktop part?
---
I edited my theme CSS/HTML vis Customize → Themes from the admin panel.
1. Either edit your theme or create a theme component here by following [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7).
2. Click on `Edit CSS/HTML`
3. In `Body` tab, you put the SVG code
In `Common` tab, you put the CSS
---
I had so much trouble with this, and the problem was in the way I was putting it lol, thank you very much for teaching me how to put it in the right place, I will always be grateful for your help, thank you very much