Change search icon

Product Support

AI-generated summary

The discussion is about changing the search icon in Discourse. agf1997 wants to replace the existing search icon with a similar SVG icon that matches their WordPress site. pmusaraj suggested a guide on replacing default SVG icons with custom ones in a theme. agf1997 inquired about updating the about.json file via the Discourse UI, and pmusaraj advised that it’s not necessary to edit the file, instead, uploading the SVG sprite through the UI with the SCSS var name “icons-sprite” is sufficient.

1

Is there a way to replace the existing search icon with another?

I’d like to replace it with a very similar, but slightly different, icon that matches my wordpress site.

The new icon would be an SVG generated with the following code:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>
2

See Replace Discourse’s default SVG icons with custom icons in a theme.

3

Thanks, I’ll look into this.

4

This maybe a basic question, but how do I update the about.json via the Discourse UI?

Thanks

5

Through the UI you don’t need to edit the about.json file, just do this: