# SVG image/Icon in heading text

**URL:** <https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509>\
**Category:** Ask for Help\
**Created:** [September 29, 2020, 1:28pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509 "2020-09-29T13:28:36Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [September 29, 2020, 1:28pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/1 "2020-09-29T13:28:36Z")

</div>

Is there a way to insert an icon as a part of title/heading? I am trying to avoid inserting emoji.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 29, 2020, 2:06pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/2 "2020-09-29T14:06:33Z")

</div>

I know @Deena has done this for sure. Possibly @Lucas_Pires as well.

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [September 29, 2020, 2:07pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/3 "2020-09-29T14:07:56Z")

</div>

Thanks @Jeff_Hager. Will wait for their response.

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 29, 2020, 2:11pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/4 "2020-09-29T14:11:18Z")

</div>

Check the last item in the doc:

> **[RICH TEXT CSS / CODE FOR GLIDE](https://docs.google.com/document/d/1F0iwtlecciW8hlk84nA5hLDXroxhhPTvSZkKDDZIn8o/edit)**
>
> PROFILE LAYOUT \<img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;"\> \<p\>\<div style=" background-image: url(AVATAR); -moz-border-radius: 50%; ...

You have to place your url in the place of INSERT URL

I had some help with this so if it doesn’t work we have to wait for @Lucas_Pires who gave it to me. lol

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [September 29, 2020, 2:38pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/5 "2020-09-29T14:38:08Z")

</div>

Thanks @Deena and @Lucas_Pires

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [September 29, 2020, 2:39pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/6 "2020-09-29T14:39:19Z")

</div>

Is CSS supported officially?

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 29, 2020, 2:41pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/7 "2020-09-29T14:41:28Z")

</div>

No, Glide has repeatedly said it is not.

---

<div class="post-metadata">

**Author:** ![S\_C](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/s_c/32/12766_2.png) [@S\_C](https://community.glideapps.com/u/S_C)\
**Post date:** [September 29, 2020, 2:41pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/8 "2020-09-29T14:41:47Z")

</div>

Ok. Good to know.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 29, 2020, 2:44pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/9 "2020-09-29T14:44:53Z")

</div>

😬

---

<div class="post-metadata">

**Author:** ![sardamit](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sardamit/32/263_2.png) [@sardamit](https://community.glideapps.com/u/sardamit)\
**Post date:** [September 29, 2020, 3:19pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/10 "2020-09-29T15:19:57Z")

</div>

@Lucas_Pires and @Deena!

Thank you!

---

<div class="post-metadata">

**Author:** ![Deena](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/deena/32/9877_2.png) [@Deena](https://community.glideapps.com/u/Deena)\
**Post date:** [September 29, 2020, 3:22pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/11 "2020-09-29T15:22:20Z")

</div>

I nominate @Lucas_Pires to join the already incredibly talented Glide Design team so we can have legit mind-blowing design without violating the rules. lol

---

<div class="post-metadata">

**Author:** ![sardamit](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sardamit/32/263_2.png) [@sardamit](https://community.glideapps.com/u/sardamit)\
**Post date:** [September 29, 2020, 3:24pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/12 "2020-09-29T15:24:30Z")

</div>

Anything less is unacceptable.

I know @david is trying hard to get some incredible talent.

> <https://twitter.com/dvdsgl/status/1310724368121487361>

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 29, 2020, 3:33pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/13 "2020-09-29T15:33:04Z")

</div>

> [@Deena](#):
>
> I nominate @Lucas_Pires to join the already incredibly talented Glide Design team

Oh, this would be an honor 😌

Thank you guys! Appreciate the trust and compliments. I just try to do what I think could be an amazing experience for me as user

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [November 11, 2020, 8:25pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/14 "2020-11-11T20:25:10Z")

</div>

Just took a look at the document. Incredibly helpful but… The generate image component doesn’t work in the template column. All it says is ‘glide:mesh’ instead of the actual image. Is this a bug or is this how things are going to be forever 😭

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 11, 2020, 11:32pm UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/15 "2020-11-11T23:32:18Z")

</div>

This is its intended behaviour.

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [February 11, 2021, 3:36am UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/16 "2021-02-11T03:36:44Z")

</div>

Is there away to get the URL image from the sheet ID? I wonder how you guys know the ID, of each element? i know a bit css. but i dont understand how you guys get it?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 11, 2021, 6:12am UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/17 "2021-02-11T06:12:03Z")

</div>

> [@abe.sherman](#):
>
> Is there away to get the URL image from the sheet ID?

Not sure what you’re asking there?  
In Deena’s example:

(`background-image: url("INSERT URL");`

You need to replace `INSERT URL` with the URL of the image you want to use.

> [@abe.sherman](#):
>
> i know a bit css. but i dont understand how you guys get it?

You need to use browser dev inspection tools.  
In Chrome, for example, you can open your app in a browser tab, then Right Click → Inspect.

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [February 12, 2021, 3:04am UTC](https://community.glideapps.com/t/svg-image-icon-in-heading-text/16509/18 "2021-02-12T03:04:52Z")

</div>

Thank you Yes i wanted to get the class and ID. I am finally understanding how you guys are doing it 🙂 also Is there a way to add another

 In front of some image? and at the end? like this

> ```
> <div class="My Class i want to add>`
> <div class="sc-uxeQQ ehSxPD"></div>
> <div class="sc-uxeQQ ehSxPD"></div>
> </div>
> 
> ```

I need some kinda workaround to play with.

Is there anywhere where i can find it on the forms i am sure it was asked before.

This is what i am working on. I thought i might share.

> ```
> <div class="ImgAfter"><pre><span><style>
> * {
> box-sizing: border-box;
> }
> .ImgAfter::after{
> content: "";
> clear: both;
> display: table;
> }
> [data-test="app-image-carousel"]{
> float: left;
> width: 20.33%;
> padding: 20.33%;
> }
> @media screen and (max-width: 10px) {
> .column {
> width: 200%;
> }
> }
> </style></span></pre>
> </div>
> 
> ```