# 🆕 Hero Icons (icons from names) Plugin

**URL:** <https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683>\
**Category:** General\
**Created:** [October 28, 2021, 12:18pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683 "2021-10-28T12:18:21Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 28, 2021, 3:08pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/21 "2021-10-28T15:08:46Z")

</div>

In the meantime, it’s already cool to display contextual icons without multiplying components ✔

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [October 28, 2021, 4:53pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/22 "2021-10-28T16:53:51Z")

</div>

> [@david](#):
>
> [https://heroicons.com/](https://heroicons.com/)

Okay color me stupid but as a 100% non-coder, I still don’t understand how these code columns work. I have read the instructions at [Glide Docs](https://docs.glideapps.com/all/reference/data-editor/computed-columns/experimental-code-column) but there are so many terms there that I don’t understand - the example shown is to find a substring - I am clueless what that is, let alone why I would need to find one. I was kind of ignoring this feature but now so many cool things are tied to it (like these icons) that I am feeling left in the dust and would really like to learn. Are there any videos out there showing step-by-step how they are added to an app? Thanks!

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [October 28, 2021, 5:00pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/24 "2021-10-28T17:00:59Z")

</div>

Happy news !

---

<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:** [October 28, 2021, 5:16pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/25 "2021-10-28T17:16:10Z")

</div>

This won’t answer your over-all question, but substring is a programming term for getting a specific section of text out of a larger piece of text.

Let’s say that we have a column with text such as this:  
‘ABCDEFG’  
(Some code also recognizes the first position in a list as the 0 position. For this example, I’ll treat the first position as the 1 position so it’s less confusing)

If I wanted to only get the value ‘DEF’, I would use a substring. In code, you would do something like SUBSTRING(‘ABCDEFG’, 4, 3). That’s telling the substring function that you want to get a value from ‘ABCDEFG’ but you want to start at position 4 and grab 3 characters. That will return the value ‘DEF’.

That’s substring in a nutshell. Some of us do throw around coding terminology. A string is alphanumeric text, but then you also have integers, decimals, booleans, dates, and all kinds of stuff that makes your head spin. For string manipulation, sometimes we want to add a dynamic number of spaces before and/or after a piece of text so each value has the same number of characters. That’s Padding. Sometimes we want to remove any spaces before and/or after a piece of text. That’s trimming.

I think a lot of David’s posts on new plugins show a quick example and maybe a video. But mostly, you can copy the plugin url, create an experimental code column, insert the url, and play around with the parameters that show up to get a feel for what they do. It’s really the same experience as you get when playing with the plugins directly on the plugin page.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [October 28, 2021, 5:25pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/26 "2021-10-28T17:25:02Z")

</div>

> [@kabookie](#):
>
> Are there any videos out there showing step-by-step how they are added to an app?

They will soon just appear as normal columns in Glide, indistinguishable from the other computed columns. You only need to understand code columns if you plan to build them, and you should be comfortable writing JavaScript in this case.

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [October 28, 2021, 5:57pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/27 "2021-10-28T17:57:51Z")

</div>

Thank you David! I think I will just hold off and wait for that. So many other things to spend my time on right now other than learning something I don’t need to 😍

---

<div class="post-metadata">

**Author:** ![Maria\_Nunez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maria_nunez/32/16465_2.png) [@Maria\_Nunez](https://community.glideapps.com/u/Maria_Nunez)\
**Post date:** [October 29, 2021, 6:34am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/28 "2021-10-29T06:34:20Z")

</div>

😍

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [October 29, 2021, 7:44am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/29 "2021-10-29T07:44:14Z")

</div>

VERY useful! 😍

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [October 29, 2021, 11:48am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/30 "2021-10-29T11:48:28Z")

</div>

Hola @Maria_Nunez!

Welcome to the community!

---

<div class="post-metadata">

**Author:** ![VVerhille](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vverhille/32/16246_2.png) [@VVerhille](https://community.glideapps.com/u/VVerhille)\
**Post date:** [December 1, 2021, 5:13pm UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/31 "2021-12-01T17:13:23Z")

</div>

I love this Hero Icons Plugin, thanks @david !  
I also often need “numbered images” for rankings for example  
For the moment, i use services like “[dummyimage.com/](http://dummyimage.com/)” to generate the links with Template Column (dynamic images based on values). But i am not happy with it due to delay / latency in displaying images in the apps.  
Do you think it would be possible to extend that plugin with numbers, letters or caracters in general ? Or does this still exist in another way ? Thanks

---

<div class="post-metadata">

**Author:** ![SuperMerabh](https://avatars.discourse-cdn.com/v4/letter/s/8491ac/32.png) [@SuperMerabh](https://community.glideapps.com/u/SuperMerabh)\
**Post date:** [December 5, 2021, 4:08am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/32 "2021-12-05T04:08:21Z")

</div>

> [@Manikandan\_R](#):
>
> How to use this icons?

Hi guys, I created a video tutorial for those who asked how to use it. This is me explaining to the best of my understanding. I also found a few bugs and I will be reporting them on a different post. It’s a great feature!

part 1

part 2

After playing with it for a bit I think that the size of icon, padding, etc. are in percentage…not in pixels or any other unit. If anyone from the team can verify this, that would be great.

---

<div class="post-metadata">

**Author:** ![SuperMerabh](https://avatars.discourse-cdn.com/v4/letter/s/8491ac/32.png) [@SuperMerabh](https://community.glideapps.com/u/SuperMerabh)\
**Post date:** [December 5, 2021, 4:53am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/33 "2021-12-05T04:53:30Z")

</div>

> [@SuperMerabh](#):
>
> I also found a few bugs and I will be reporting them on a different post. It’s a great feature!

Here’s a video with the bugs I found:

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [December 5, 2021, 5:03am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/34 "2021-12-05T05:03:10Z")

</div>

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [July 6, 2022, 6:33am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/35 "2022-07-06T06:33:02Z")

</div>

Hi is there a way to change the source of the icons from Heroicons to another source?

---

<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:** [July 6, 2022, 8:13am UTC](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683/36 "2022-07-06T08:13:48Z")

</div>

No, there isn’t.

[Previous page](https://community.glideapps.com/t/hero-icons-icons-from-names-plugin/33683.md?page=1)
