I see that any icon with a gradient that I put doesn’t work, does the Discourse not accept it? If he doesn’t accept it, is there a way to put a gradient around the icons via css?

I have same queries, anybody have any clue regarding this?

If the SVG format supports gradients, then consider it a bug. Probably best reported as a feature request at the git repository.

An svg such a logo should work fine. AFAIK SVG icon gradients are overridden when their color is set by the CSS?

I saw that there are two ways, by CSS and by the code of the SVG file, but whenever I use one or the other it doesn’t work, the file doesn’t change! Do you know of a way for me to use gradient on the icons?

You can use this trick to make a gradient on SVG icons: [תמונה] How do I put gradient on thin icons? Development Hi, From what I read in Gradients in SVG - SVG | MDN, you must add to the SVG. Others resources: Gradient fills for SVG icons SVG Gradients What you can do is create a hidden SVG in your theme/component to define your gradients: <stop offset="50%" stop-color="var(--color-st… You create an invisible SVG where you define all your gradients associated with an id (e.g.: <linearGradient id="my_id"...) Then, in your CSS, you target SVG icons and use fill: url(#my-id) I’m not sure how much it’s ugly, but it works. :smile:

האם Discourse מקבל אייקוני SVG עם Gradient?

מפתח

awesomerobot (Kris) 1 במאי,‏ 2023,‏ 8:18pm 6

CSS gradients won’t work with SVG icons, I believe the gradient has to be applied to the SVG file directly

נושא		תגובות	צפיות
How do I put gradient on thin icons? Development	6	3205	31 במרץ,‏ 2023
Icons made in Inkscape and Photoshop do not have colors changed via CSS Development	7	601	9 ביוני,‏ 2023
Change icon style in discourse Product Support	1	312	4 במרץ,‏ 2025
How to use a custom SVG like icon in the Reactions plugin? Product Support reactions	3	980	2 ביוני,‏ 2023
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9595	24 בפברואר,‏ 2026

האם Discourse מקבל אייקוני SVG עם Gradient?

נושאים קשורים