I followed this tutorial to replace the icons [image] How i can change the Staff Icon Support How i can use a custome svg file as Icon I have uploaded the svg file on the Dark Design. [grafik] And i have the following custome header api.replaceIcon('shield-alt', '$shield-alt-duotone'); But the Icon is not visible. I got the Android icons here Material Symbols and Icons - Google Fonts but when they replace they get misaligned like as in below example [image] [image] How can I align them?

Yes this might be causing some problems, strange that it was removed… I wonder if Google changed something? You can try moving the height/width to the viewbox values instead, that would look like:

The easiest way to manage this will be to edit the icons themselves. One factor I can see is that the icon set we use by default, FontAwesome, doesn’t include dimensions within their SVG files while Google does. FontAwesome’s opening tag: Google’s (note the height and width added around the viewBox) So I’d try removing the height/width from Google’s icons… the resulting spritesheet looks like this: <path d="M150 816q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 756h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 816H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 336h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 396H150Z"/> and the result is aligned :tada: [Screenshot 2023-03-06 at 4.05.37 PM]

Thanks for helping me, I did it here and it worked, but there are some svg icons that even if I remove them, they are still big, like the ones below <path d="M17.45 43.35v-10.4h-.8q-5.25.05-8.725-3.375Q4.45 26.15 4.45 21q0-5.15 3.575-8.75 3.575-3.6 8.725-3.6h3.2l-3.8-3.85 2-2.05 7.4 7.4-7.4 7.4-2-2.05 3.8-3.9h-3.2q-3.9 0-6.65 2.75Q7.35 17.1 7.35 21q0 4 2.775 6.7t6.725 2.7h3.5v5.9l5.95-5.9h5q3.9 0 6.65-2.75 2.75-2.75 2.75-6.7 0-3.9-2.775-6.65-2.775-2.75-6.675-2.75H29.5v-2.9h1.75q5.15 0 8.75 3.575 3.6 3.575 3.6 8.725 0 5.15-3.575 8.75-3.575 3.6-8.725 3.6h-3.75Z"/> <path d="M11.3 35.15q3.05-2.1 6.125-3.25T24 30.75q3.5 0 6.575 1.15t6.225 3.25q2.1-2.65 3.1-5.35 1-2.7 1-5.8 0-7.15-4.875-12.025T24 7.1q-7.15 0-12.025 4.875T7.1 24q0 3.1 1 5.8 1 2.7 3.2 5.35Zm12.7-9.4q-2.95 0-4.975-2.025Q17 21.7 17 18.75q0-2.95 2.025-4.975Q21.05 11.75 24 11.75q2.95 0 4.975 2.025Q31 15.8 31 18.75q0 2.95-2.025 4.975Q26.95 25.75 24 25.75Zm0 18.05q-4.1 0-7.675-1.55t-6.275-4.275q-2.7-2.725-4.275-6.3Q4.2 28.1 4.2 23.95q0-4 1.575-7.6 1.575-3.6 4.275-6.325t6.275-4.275Q19.9 4.2 24.05 4.2q4 0 7.6 1.575 3.6 1.575 6.3 4.275 2.7 2.7 4.275 6.3Q43.8 19.95 43.8 24q0 4.1-1.55 7.675t-4.275 6.275q-2.725 2.7-6.325 4.275Q28.05 43.8 24 43.8Zm0-2.9q2.7 0 5.35-.85 2.65-.85 5.1-2.8-2.4-1.75-5.075-2.65-2.675-.9-5.375-.9t-5.375.9q-2.675.9-5.025 2.65 2.4 1.95 5.05 2.8 2.65.85 5.35.85Zm0-18.1q1.75 0 2.9-1.15t1.15-2.9q0-1.75-1.15-2.9T24 14.7q-1.75 0-2.9 1.15t-1.15 2.9q0 1.75 1.15 2.9T24 22.8Zm0-4.05Zm0 18.5Z"/> [image] do i have to take anything else to make it smaller?

I noticed now that if I download the svg icons from google fonts they no longer appear with the viewbox as they came before, why is that? would that have anything to do with it?

Before, the svg of the workspace icon was like this, with a view box (I just had to remove the height and width and everything was fine) <path d="M230.693 931.614q-62.886 0-105.596-42.711-42.711-42.71-42.711-105.596 0-62.885 42.711-105.595 42.71-42.711 105.596-42.711 62.885 0 105.595 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.71 42.711-105.595 42.711Zm499.422 0q-62.693 0-105.596-42.711-42.903-42.71-42.903-105.596 0-62.885 42.903-105.595 42.903-42.711 105.596-42.711 62.693 0 105.404 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.404 42.711Zm-499.497-58.383q37.228 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.31-26.385-63.539-26.385-37.228 0-63.613 26.31-26.385 26.31-26.385 63.539 0 37.228 26.31 63.613 26.31 26.385 63.539 26.385Zm499.23 0q37.229 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.309-26.385-63.346-26.385-37.036 0-63.613 26.31Q640 746.004 640 783.233q0 37.228 26.48 63.613 26.481 26.385 63.368 26.385Zm-249.04-360.847q-62.693 0-105.596-42.903-42.903-42.903-42.903-105.596 0-62.693 42.903-105.404t105.596-42.711q62.693 0 105.403 42.711 42.711 42.711 42.711 105.404t-42.711 105.596q-42.71 42.903-105.403 42.903ZM480.54 454q37.229 0 63.614-26.48 26.385-26.481 26.385-63.368 0-37.229-26.31-63.613-26.31-26.385-63.346-26.385-37.037 0-63.614 26.31-26.577 26.309-26.577 63.346 0 37.036 26.481 63.613Q443.653 454 480.54 454Zm.075-89.923Zm249.308 419.23Zm-499.23 0Z"/> now it’s downloading like this, without a view box and it’s all big on the website <path d="M11.55 41.8q-3.15 0-5.3-2.15t-2.15-5.3q0-3.15 2.15-5.275 2.15-2.125 5.3-2.125t5.275 2.125Q18.95 31.2 18.95 34.35q0 3.15-2.125 5.3T11.55 41.8Zm24.95 0q-3.15 0-5.275-2.15-2.125-2.15-2.125-5.3t2.125-5.275Q33.35 26.95 36.5 26.95q3.15 0 5.275 2.125Q43.9 31.2 43.9 34.35q0 3.15-2.125 5.3T36.5 41.8Zm-24.95-2.95q1.85 0 3.175-1.3 1.325-1.3 1.325-3.2 0-1.85-1.325-3.175Q13.4 29.85 11.55 29.85q-1.85 0-3.175 1.325Q7.05 32.5 7.05 34.35q0 1.85 1.3 3.175 1.3 1.325 3.2 1.325Zm24.95 0q1.85 0 3.175-1.3Q41 36.25 41 34.35q0-1.85-1.325-3.175Q38.35 29.85 36.5 29.85q-1.85 0-3.175 1.325Q32 32.5 32 34.35q0 1.85 1.325 3.175Q34.65 38.85 36.5 38.85ZM24.05 20.8q-3.15 0-5.3-2.125T16.6 13.4q0-3.15 2.15-5.275Q20.9 6 24.05 6t5.275 2.125Q31.45 10.25 31.45 13.4q0 3.15-2.125 5.275Q27.2 20.8 24.05 20.8Zm0-2.9q1.85 0 3.175-1.325Q28.55 15.25 28.55 13.4q0-1.85-1.325-3.175Q25.9 8.9 24.05 8.9q-1.85 0-3.175 1.325Q19.55 11.55 19.55 13.4q0 1.85 1.325 3.175Q22.2 17.9 24.05 17.9Zm0-4.5ZM36.5 34.35Zm-24.95 0Z"/>

After replacing icons I'm having trouble aligning them

Product Support

danielabc (Daniela) March 11, 2023, 6:20pm 7

Now it works, thanks a lot for helping me!

Topic		Replies	Views
How to replace an existing SVG icon with a custom one? Development	10	829	March 25, 2021
Header icon invisible after upgrade Product Support	8	1556	February 26, 2019
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2806	June 18, 2019
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45180	December 1, 2023
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9581	February 24, 2026

After replacing icons I'm having trouble aligning them

Related topics