# Help replacing an icon **URL:** https://meta.discourse.org/t/help-replacing-an-icon/273277 **Category:** Development **Created:** [July 30, 2023, 5:15pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277 "2023-07-30T17:15:13Z") **Posts on this page:** 12 **Page:** 1
### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham) #### Post date: [July 30, 2023, 5:15pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/1 "2023-07-30T17:15:13Z")
I am trying to replace the `bars` icon for opening/closing the sidebar following these instructions [Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736) but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) ![image](https://global.discourse-cdn.com/meta/original/4X/7/8/9/7898e334bc095d0d63fdb60ebff9bf188218a621.jpeg) Created a component and uploaded the spritesheet: ![image](https://global.discourse-cdn.com/meta/original/4X/1/9/9/199bf090d870f5a526a04e31187a12cd7c5a3fe9.jpeg) And used this code (I only want the change on desktop) ![image](https://global.discourse-cdn.com/meta/original/4X/f/8/7/f87c57b088f8697e284e80839a64762ea288855d.jpeg) But I just get no icon: ![image](https://global.discourse-cdn.com/meta/original/4X/9/c/9/9c96473d2c2c9f96754ada95172e75289204b0c2.jpeg) Any ideas? I’m sure I’m missing something small and stupid! Thank you! ---
### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly) #### Post date: [July 31, 2023, 1:07am UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/2 "2023-07-31T01:07:39Z")
did you try it with lowercase asset filename instead (eg: `npn_spritesheet.svg`)? because otherwise that looks like it should work (i can easily do it with a v5 icon but i don’t have any v6 pro ones). unless it’s simply because of this: > [@How to use Font Awesome Pro v6?](https://meta.discourse.org/t/how-to-use-font-awesome-pro-v6/265088/4): > > We haven’t officially updated to v6 yet… v6 changes some icons, [renames many](https://fontawesome.com/docs/web/setup/upgrade/whats-changed#icons-renamed-in-version-6), and removes some… so it’s a decent bit of work to find everything that needs to be updated and replaced. Hopefully it’s something we can get to soon. ---
### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel) #### Post date: [July 31, 2023, 11:14am UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/3 "2023-07-31T11:14:09Z")
What do you see when you inspect the `` element left of your site logo? E.g. you don’t have a viewbox declared on the symbol tag, the icon could just be out of view. ---
### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham) #### Post date: [July 31, 2023, 12:40pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/4 "2023-07-31T12:40:33Z")
> [@Lilly](#): > > did you try it with lowercase asset filename instead (eg: `npn_spritesheet.svg`)? > because otherwise that looks like it should work (i can easily do it with a v5 icon but i don’t have any v6 pro ones). Strangely, when I delete that asset and reupload with a lowercase version (I even renamed it to npnassets.svg, I still see the old filename… > [@Lilly](#): > > unless it’s simply because of this: Since I downloaded the svg and inserted manually in the spritesheet I don’t think this should be an issue, that’s why I took this route since v5 doesn’t have a sidebar icon. > [@manuel](#): > > What do you see when you inspect the `` element left of your site logo? ![image](https://global.discourse-cdn.com/meta/original/4X/3/5/a/35a847fac44a89c8af252adb83995b5aef9d45cf.jpeg) ---
### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel) #### Post date: [July 31, 2023, 12:43pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/5 "2023-07-31T12:43:29Z")
..you’d need to expand the svg element and all nested elements to see the icon code. ---
### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham) #### Post date: [July 31, 2023, 12:57pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/6 "2023-07-31T12:57:50Z")
![image](https://global.discourse-cdn.com/meta/original/4X/4/0/c/40c3ab8243ecb46b6c801a105fd03eba3903d5c5.jpeg) ---
### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel) #### Post date: [July 31, 2023, 1:06pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/7 "2023-07-31T13:06:56Z")
So the icon code from the spritesheet is not rendered. You could still try to change the id of the icon to a name without dash, like npnsidebar. sometimes i encounter issues with variable names in themes for which i can’t figure out the actual cause, but making a small adjustment fixes it. Else you could share the svg file. I saw you pixelated the actual code, but it will be publicly accessible anyways when you use it on your live site (edit: ah, didn’t see it’s from the pro plan..) ---
### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham) #### Post date: [July 31, 2023, 1:17pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/8 "2023-07-31T13:17:36Z")
Thanks, I tried changing the name to npnsidebar in the spritesheet and the code which allowed me to replace the spritesheet properly as well. But unfortunately it did not help. I can DM you the spritesheet and svg to double check my work. Thanks for your help! ---
### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj) #### Post date: [July 31, 2023, 5:06pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/9 "2023-07-31T17:06:23Z")
If you replace the `bars` icon with another icon in the default set, does the replacement work? Say, replace it with `cog` or `comment`. If that works, then the issue is with your custom SVG symbol code. It probably needs a `viewBox` attribute. Like this custom icon (for the gifs theme component): ![image](https://global.discourse-cdn.com/meta/original/4X/b/3/d/b3d6e7869234981b45ee28dfea760f51f105a54a.png) ---
### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly) #### Post date: [July 31, 2023, 5:10pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/10 "2023-07-31T17:10:00Z")
> [@pmusaraj](#): > > If you replace the `bars` icon with another icon in the default set, does the replacement work? Say, replace it with `cog` or `comment`. i replaced it this way with a default one (the code icon) yesterday and it worked, so i think it is indeed viewBox attribute like you say. ---
### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham) #### Post date: [July 31, 2023, 5:19pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/11 "2023-07-31T17:19:43Z")
That was it, thank you as always Penar! ![image](https://global.discourse-cdn.com/meta/original/4X/7/6/7/767d161d1416b69f286a9febe427477045571542.jpeg) ---
### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system) #### Post date: [August 30, 2023, 5:20pm UTC](https://meta.discourse.org/t/help-replacing-an-icon/273277/12 "2023-08-30T17:20:01Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.