How to replace an existing SVG icon with a custom one?

Falco · March 22, 2021, 7:34pm

Discourse Gifs ships a custom GIF icon that you can use as an example:

discourse/discourse-gifs/blob/main/assets/gif.svg?short_path=61c0681

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="discourse-gifs-gif" viewBox="0 0 1024 1024">
        <path d="M944 299H692c-4.4 0-8 3.6-8 8v406c0 4.4 3.6 8 8 8h59.2c4.4 0 8-3.6 8-8V549.9h168.2c4.4 0 8-3.6 8-8V495c0-4.4-3.6-8-8-8H759.2V364.2H944c4.4 0 8-3.6 8-8V307c0-4.4-3.6-8-8-8zm-356 1h-56c-4.4 0-8 3.6-8 8v406c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V308c0-4.4-3.6-8-8-8zM452 500.9H290.5c-4.4 0-8 3.6-8 8v43.7c0 4.4 3.6 8 8 8h94.9l-.3 8.9c-1.2 58.8-45.6 98.5-110.9 98.5c-76.2 0-123.9-59.7-123.9-156.7c0-95.8 46.8-155.2 121.5-155.2c54.8 0 93.1 26.9 108.5 75.4h76.2c-13.6-87.2-86-143.4-184.7-143.4C150 288 72 375.2 72 511.9C72 650.2 149.1 736 273 736c114.1 0 187-70.7 187-181.6v-45.5c0-4.4-3.6-8-8-8z"/>
    </symbol>
</svg>

Topic		Replies	Views
How to use a custom SVG like icon in the Reactions plugin? Support reactions	3	688	June 2, 2023
Change icons globally Developer Guides how-to	24	9106	July 1, 2021
Change the Like Icon to :+1: Theme component official , change-like-icon	6	13816	February 27, 2024
Introducing Font Awesome 5 and SVG icons Announcements new-feature	135	41381	December 1, 2023
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	7	8197	March 7, 2025

How to replace an existing SVG icon with a custom one?

Related topics