# Icons in coded component

**URL:** <https://community.appfarm.io/t/icons-in-coded-component/336>\
**Category:** Ask the community\
**Tags:** ui\
**Created:** [March 12, 2023, 2:41pm UTC](https://community.appfarm.io/t/icons-in-coded-component/336 "2023-03-12T14:41:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erlend](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@Erlend](https://community.appfarm.io/u/Erlend)\
**Post date:** [March 12, 2023, 2:41pm UTC](https://community.appfarm.io/t/icons-in-coded-component/336/1 "2023-03-12T14:41:23Z")

</div>

Hello Appfarm,

Is it possible to get the icons in coded component? I cant seem to find where to get them.

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![HJT](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/hjt/32/64_2.png) [@HJT](https://community.appfarm.io/u/HJT)\
**Post date:** [March 13, 2023, 9:29am UTC](https://community.appfarm.io/t/icons-in-coded-component/336/2 "2023-03-13T09:29:04Z")

</div>

Hi,

There is no “out of the box” way to use the built in icons, but you can add in material icons as a stylesheet, and with a simple line of HTML use icons from more or less the same icon pack as in Create.

Follow these steps to use icons in coded component:

1. Add the following URL: ([https://fonts.googleapis.com/icon?family=Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons)) in your coded component → Resources → Type: Stylesheet URL
2. Add the following URL: ([https://fonts.googleapis.com/icon](https://fonts.googleapis.com/icon)) under Configuration → Environments → Content Security → Style Sources
3. Edit your HTML in your coded component and add in: `<span class="material-icons md-24">face</span>` for icons. In this code “face” is the name of the icon, and md-24 is the class for a 24px icon.

**Use the following link to find other icons:**

> **[Material Symbols and Icons - Google Fonts](https://fonts.google.com/icons?selected=Material%2BSymbols)**
>
> Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

**Use the following link to read more about Material Icons:**

> **[Material Icons Guide  |  Google Fonts  |  Google Developers](https://developers.google.com/fonts/docs/material_icons)**