# Adding badges to profiles

**URL:** <https://community.glideapps.com/t/adding-badges-to-profiles/80275>\
**Category:** Ask for Help\
**Created:** [February 23, 2025, 12:31am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275 "2025-02-23T00:31:59Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![callum](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/callum/32/65236_2.png) [@callum](https://community.glideapps.com/u/callum)\
**Post date:** [February 23, 2025, 12:31am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/1 "2025-02-23T00:31:59Z")

</div>

![concept](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/63ae3549566644cd7794750771ed0ce1dbb4efec.png)  
Hello there! I’m currently working on a verification system for a Glide app, and I want to display a little badge next to the user’s name when they’re verified, is there any way that I can do it? I’m aware you can display this with text, however, I’m looking for an actual badge icon.

For a bit of additional context, I’m currently using the Title component to display the user’s information. If there’s any way that I can do it without using the Title component, then I’d appreciate that too.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 23, 2025, 12:38am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/3 "2025-02-23T00:38:37Z")

</div>

You can use the hero icon column to get the icon you want and concat it to the title you want!

---

<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:** [February 23, 2025, 1:50am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/4 "2025-02-23T01:50:17Z")

</div>

![CleanShot 2025-02-23 at 08.49.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a9fd8f44726fe9894f03f09fad01c7ad3565659f.png)

 ![CleanShot 2025-02-23 at 08.49.18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/677a5be3cbef7c1d03ff68357c2c113c2559da0b.png)

Hero icons exist in this format and can’t be used that way I think?

Maybe an AI component can help.

---

<div class="post-metadata">

**Author:** ![callum](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/callum/32/65236_2.png) [@callum](https://community.glideapps.com/u/callum)\
**Post date:** [February 23, 2025, 11:13am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/5 "2025-02-23T11:13:13Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e8f3706da21fe8a7852ae068dd9302c2a08a9e7c.png)  
From what I’ve tried, that only displays the SVG data next to the name, not an icon.

---

<div class="post-metadata">

**Author:** ![callum](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/callum/32/65236_2.png) [@callum](https://community.glideapps.com/u/callum)\
**Post date:** [February 25, 2025, 8:45am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/6 "2025-02-25T08:45:53Z")

</div>

I dont understand what you mean by “Maybe an AI component can help.” May you clarify a little bit more?

---

<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:** [February 25, 2025, 9:06am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/7 "2025-02-25T09:06:29Z")

</div>

Obviously Custom CSS can help, but it’s only available on paid plans.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [February 25, 2025, 11:31am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/8 "2025-02-25T11:31:26Z")

</div>

> [@callum](#):
>
> I dont understand what you mean by “Maybe an AI component can help.” May you clarify a little bit more?

Anytime you want to customize your layout beyond the native components offered by Glide, you have a few options:

1. Add CSS code in the dedicated field
2. Use HTML and CSS in a rich text component
3. Use markup language
4. **Create your own component with a custom AI component**

Options 1-3 would require you (the developer) to generate the code correctly, perhaps with the help of an AI tool (Claude, ChatGPT, Gemini, Grok, etc.).

Option 4 is offered by Glide and allows you to generate your own custom component directly by chatting with an AI **within the Glide builder**. It’s similar to options 1-3, but this option is a feature offered by Glide and it works well. It’s the “AI + nocode” way of writing code. The advantage of this is that the generated component will seemlessly blend with your app (branding, color, spacing, etc.), whereas with HTML and CSS you actually need to know what you’re doing.

---

<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:** [February 25, 2025, 1:04pm UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/9 "2025-02-25T13:04:59Z")

</div>

![1000004715](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/127a2253d4ba2082768a76b59365bb928ffb11f3.png)

> **[AI Custom | Glide Docs](https://www.glideapps.com/docs/essentials/components/ai-custom)**
>
> Design new components through prompts.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 25, 2025, 5:23pm UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/10 "2025-02-25T17:23:23Z")

</div>

Was able to make one!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b3533683d61485022fa44e25061d7d6240f3a3dc.jpeg)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 25, 2025, 5:25pm UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/11 "2025-02-25T17:25:24Z")

</div>

> Was able to make one!
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b3533683d61485022fa44e25061d7d6240f3a3dc.jpeg)

Here is the ai code to put in the prompt:

```html
<html>
  <head>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
    <meta name="color-scheme" content="light dark">
    <style>
      html, body {
        font-family: 'Inter', sans-serif;
        background-color: transparent;
      }
    </style>
    <script type="module">
      import { init } from "https://components.glide.info/shell/v1.js";
      document.addEventListener("DOMContentLoaded", () => {
        init({"fieldsDataObject":{"profilePic":null,"headingImage":null,"title":null,"badge":null},"schema":[{"name":"profilePic","type":"string","id":"profilePic"},{"name":"headingImage","type":"string","id":"headingImage"},{"name":"title","type":"string","id":"title"},{"name":"badge","type":"string","id":"badge"}],"actions":[],"debug":false})
      });
    </script>
    <style>/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:hsl(var(--color-gray-200)/1);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:hsl(var(--color-gray-400)/1);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.headline-lg,.headline-md,.headline-sm,.headline-xl,.headline-xs{font-weight:600}.headline-lg{font-size:26px;letter-spacing:-.025em;line-height:1.375}@media (min-width:768px){.headline-lg{font-size:32px}}@media (min-width:1024px){.headline-lg{font-size:1.875rem;line-height:2.25rem}}.body-base{font-size:1rem;line-height:1.5rem;line-height:1.5}@media (min-width:768px){.body-base{font-size:.875rem;line-height:1.25rem}}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.flex{display:flex}.h-20{height:5rem}.h-48{height:12rem}.h-6{height:1.5rem}.w-20{width:5rem}.w-auto{width:auto}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-end{align-items:flex-end}.items-center{align-items:center}.rounded-full{border-radius:9999px}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border-4{border-width:4px}.border-background{--tw-border-opacity:1;border-color:hsl(var(--color-background-DEFAULT)/var(--tw-border-opacity))}.bg-background{--tw-bg-opacity:1;background-color:hsl(var(--color-background-DEFAULT)/var(--tw-bg-opacity))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.\@container{container-type:inline-size}@layer colors{:root.color-scheme-auto{--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%;@media (prefers-color-scheme:dark){--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}:root.color-scheme-light{color-scheme:light;--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%}:root.color-scheme-dark{color-scheme:dark;--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}@media (min-width:640px){.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width:768px){.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:px-7{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width:1280px){.xl\:px-8{padding-left:2rem;padding-right:2rem}}</style>
  </head>
  <body x-data="state" class=""
        :class="{ 'cursor-pointer': hasBodyAction }">
    <div x-cloak x-show="themeLoaded" class="@container w-full body-base antialiased">
      <div
        :class="{ 'px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8': mode === 'standalone' }"
      >
        <div class="w-full bg-background">
        <div class="relative">
          <img x-bind:src="headingImage" alt="Heading image" class="w-full h-48 object-cover rounded-t-xl">
          <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black to-transparent">
            <div class="flex items-end">
              <img x-bind:src="profilePic" alt="Profile picture" class="w-20 h-20 rounded-full border-4 border-background">
              <div class="ml-4 flex items-center">
                <h1 class="headline-lg text-white mr-2" x-text="title"></h1>
                <img x-bind:src="badge" alt="Badge" class="h-6 w-auto">
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </body>
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child@5.2.1"></script>
</html>

```

Also works with heroicons!

You can access it from @John_Romano’s AI components library app too:  
I just created it:

> **[Glide Ai Component Library](https://aicomponents.glide.page/dl/a400f7/s/9671c3/r/a-I9RK46STRu97aYnNnhZ8Q)**
>
> Ai Components

---

<div class="post-metadata">

**Author:** ![callum](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/callum/32/65236_2.png) [@callum](https://community.glideapps.com/u/callum)\
**Post date:** [February 25, 2025, 11:26pm UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/12 "2025-02-25T23:26:50Z")

</div>

Ahh, I get it now. I somehow confused that for the AI column inside of the database, sorry.

---

<div class="post-metadata">

**Author:** ![callum](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/callum/32/65236_2.png) [@callum](https://community.glideapps.com/u/callum)\
**Post date:** [February 25, 2025, 11:29pm UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/13 "2025-02-25T23:29:07Z")

</div>

That’s actually really cool!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 26, 2025, 12:49am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/14 "2025-02-26T00:49:08Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 5, 2025, 12:50am UTC](https://community.glideapps.com/t/adding-badges-to-profiles/80275/15 "2025-03-05T00:50:02Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.