# Problem using SVG **URL:** \ **Category:** RapidWeaver Elements\ **Created:** [January 10, 2025, 10:56am UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877 "2025-01-10T10:56:06Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 10, 2025, 10:56am UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/1 "2025-01-10T10:56:06Z")
Hi, I am just creating a template and I am using SVG Icons in a Button. When I am copying SVG Icons downloaded from Font Awesome everything looks as intended. ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/e/7edffb60e929cec25a302d7c1e4f97e8ff69565f.png) But when I am using SVGs from another Source ([svgpro.com](http://svgpro.com)) it looks like below ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/1/a1a6ad26fe1ba635a6754e3f654cd73e6e7f1ac2.png) Any idea how I can fix this? ---
**Author:** ![Jean-Marc](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jean-marc/32/26097_2.png) [@Jean-Marc](https://forums.realmacsoftware.com/u/Jean-Marc)\ **Post date:** [January 10, 2025, 12:16pm UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/2 "2025-01-10T12:16:59Z")
Bonjour, j’ai exactement le même problème d’affichage des SVG dès que je le remplace par un nouveau. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [January 10, 2025, 12:38pm UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/3 "2025-01-10T12:38:22Z")
Every time I see issues with SVG icons in Elements I’m more and more convinced that SVG icons would be better handled via custom [asset pack integrations](https://elements.nolt.io/30), and possibly a custom ‘(SVG) Icon’ element. I still think there is a need for a general SVG element (logos, spot illustrations, diagrams, graphs, charts, etc), but [SVG icons](https://design-system.w3.org/styles/svg-icons.html) are often [set-up](https://medium.com/yext-design/how-to-create-great-svg-icons-a-checklist-for-success-f255bd7f1344) a in [specific manner](https://www.govstack.com/learning-centre/citizen-portal/settings/custom-logo-images-and-colours/svg-guidelines-for-logos/) to ensure correct sizing, scaling, legibility, optimization, ability to change colours, etc. Grabbing any SVG icon off the internet and throwing it into the current SVG element to use as an icon probably won’t work as expected the vast majority of the time. ---
**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\ **Post date:** [January 10, 2025, 2:24pm UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/4 "2025-01-10T14:24:02Z")
I’ve encountered the same problem. At the moment I’ve gone back to PNG icons, not SVG. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 10, 2025, 4:47pm UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/5 "2025-01-10T16:47:56Z")
This is always a problem because SVG’s are just xml code, the way they are built can vary wildly. @WeaverPixel To be able to set the height and width on an SVG in Elements you’ll need to remove those values in the SVG file, see screenshot below for an example. ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/6/d6358c9c57f722f14bc389ede08fed2a280e8c72.jpeg) Hope that helps! We cover this and a few other issues in the [SVG Component Docs](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/svg). > **[SVG | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/svg#q-why-doesnt-the-svg-change-size-when-i-adjust-the-sizing-in-elements)** > > Add Scalable Vector Graphics to your website ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [January 10, 2025, 6:04pm UTC](https://forums.realmacsoftware.com/t/problem-using-svg/45877/6 "2025-01-10T18:04:31Z")
Thanks @dan, that’s the reason, the icons I have downloaded from [svgpro.com](http://svgpro.com) have a backed in height and width of 800 pixel. The next time I promise to also have a look at the manual 😀. So for now in the Beta it’s absolutely fine. But honestly, you cannot leave that in this form for the final version unless you want to fill the support forum. As @anon68150607 wrote we really need [asset pack integrations](https://elements.nolt.io/30) of icons from a solid library and we need a more robust SVG component. Why can’t the SVG component ignore the (potentially) backed in size informations and override them with the ones given in Elements. That could be done by an additional switch (ignore/not ignore the size infos) in the SVG component. That’s how Foundry did it as far as I recall. Just my opinion 🕶