# Display Hero Icon in template

**URL:** <https://community.glideapps.com/t/display-hero-icon-in-template/74136>\
**Category:** Ask for Help\
**Created:** [June 14, 2024, 10:23am UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136 "2024-06-14T10:23:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [June 14, 2024, 10:23am UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/1 "2024-06-14T10:23:26Z")

</div>

Hello Fellow Gliders, hope you’re all well.

I looked into all queries relating to hero images for this request but found none so far.

I’m trying to display an icon in a template so I can show it in rich text. I used the normal style it didn’t work then I found a similar code that worked when it’s imputed straight but using the same technique didn’t work for the hero in the computed column. I think the SVG encoding are different.

I’ve created the if then else column and it works fine all that’s left is to render the icon, if there’s a better way to do this or I’m making a mistake, I’d appreciate it. Thanks.

![indept](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4e4af5d4bd5c6d03b957462867482e1046ce269b.png)  
 ![my template](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/5/753fa44d051d8ac5c7918e7a22d8487f687e53d7.png)  
 ![the code](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c2f231f3586ef6de1cd5b4c3878ef071e5727817.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 14, 2024, 11:29am UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/2 "2024-06-14T11:29:45Z")

</div>

Give me your code, I’ll help you check it. One thing I see is that you don’t need to encode the viewBox.

---

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [June 14, 2024, 11:46am UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/3 "2024-06-14T11:46:56Z")

</div>

Hello, thanks it was your reference I used here. Ironic.

`<p style="display: inline;">Hello<span style="background:url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.75%2c-3.75%2c31.5%2c31.5' fill='currentColor' aria-hidden='true' color='red' height='128' width='128' style='background-color:transparent'%3e%3cpath fill-rule='evenodd' d='M11.47 2.47a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06l-6.22-6.22V21a.75.75 0 01-1.5 0V4.81l-6.22 6.22a.75.75 0 11-1.06-1.06l7.5-7.5z' clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e') no-repeat center center; width: 1.5em; height: 1.5em; display: inline-block; vertical-align: middle;"></span> Up 361% from last month (may)</p>`

The code was in the parenthesis is the code from the hero image I used a template to get it.

 ![template](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/0/50836561fa3fdd0b85990383a147e5e788b96d61.png)  
 ![upp](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db1bd65de614ac11536d25d9368c9ebc9cde5d5d.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 14, 2024, 12:03pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/4 "2024-06-14T12:03:05Z")

</div>

You can ask GPT to help you identify its errors.

```auto
<p style="display: inline;">Hello<span style="background:url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-3.75 -3.75 31.5 31.5\' fill=\'currentColor\' aria-hidden=\'true\' style=\'background-color:transparent\'><path fill-rule=\'evenodd\' d=\'M11.47 2.47a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06l-6.22-6.22V21a.75.75 0 01-1.5 0V4.81l-6.22 6.22a.75.75 0 11-1.06-1.06l7.5-7.5z\' clip-rule=\'evenodd\'></path></svg>') no-repeat center center; width: 24px; height: 24px; display: inline-block; vertical-align: middle;"></span> Up 361% from last month (may)</p>

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 14, 2024, 1:18pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/5 "2024-06-14T13:18:59Z")

</div>

Is it working for you?

---

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [June 14, 2024, 1:27pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/6 "2024-06-14T13:27:40Z")

</div>

Nicee your code works fine thank you.

I used the code, you provided and not the hero image

but how do I find the URL for each icon?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 14, 2024, 1:37pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/7 "2024-06-14T13:37:03Z")

</div>

In Glide, SVG tags can’t be used directly; instead, SVG paths are used as backgrounds. The code embeds SVG directly into HTML using a data URI scheme, including the SVG image within the HTML code itself, not at a separate URL.

---

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [June 14, 2024, 1:41pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/8 "2024-06-14T13:41:36Z")

</div>

Ohh Okay, here’s what i did, the path you used for this icon how can I get it I also want to duplicate the system for an arrow-down icon.

 ![2024-06-14 14_39_31-Morayo's farm · Glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbf6fc53cfd06fa20ea58d6e749e5e0b7223e35f.jpeg)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 14, 2024, 1:46pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/9 "2024-06-14T13:46:58Z")

</div>

The icon you need to use is actually the path data within the SVG, not a URL. SVG icons are defined by their path data, which describes the shape of the icon. Here’s a brief guide on how to get the path data:

1. **Find an SVG Icon** : Look for an SVG icon in a library like Heroicons, FontAwesome, or any other icon library.
2. **Copy the Path Data** : Once you find the icon, open its SVG code and copy the `d` attribute from the `<path>` element. This attribute contains the path data that defines the icon’s shape.
3. **Use the Path Data** : Replace the path data in your existing code with the new path data.

---

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [June 14, 2024, 2:06pm UTC](https://community.glideapps.com/t/display-hero-icon-in-template/74136/10 "2024-06-14T14:06:30Z")

</div>

Awesomeee this works thank you finally gotten it, haha