# Weweb icons library

**URL:** <https://community.weweb.io/t/weweb-icons-library/19095>\
**Category:** How do I?\
**Created:** [July 6, 2025, 10:14am UTC](https://community.weweb.io/t/weweb-icons-library/19095 "2025-07-06T10:14:02Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Bruno](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/bruno/32/14495_2.png) [@Bruno](https://community.weweb.io/u/Bruno)\
**Post date:** [July 7, 2025, 2:50am UTC](https://community.weweb.io/t/weweb-icons-library/19095/3 "2025-07-07T02:50:15Z")

</div>

Hey Tomerer,

You have 2 options to do this. Fortunately, but work pretty much the same way.

**Option 1 - Icon Element (Currently Maintained)**

- **Create** a component that takes a String as a Parameter / Input.
- **Place** an Icon Element inside it.
- **Bind** something like: `{{library_identificator}}/{{icon_name**(string input value)**}}` in the icon’s value.

NOTE: If you select the icon instead of binding it you will see the following popup. Using the list view, you will see the values you need: e.g., for Phosphor Library

**Drawbacks?** Currently only one icon in the DOM will be visible upon app deployment.

**Fix?** See option 2.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dfbd7fa414258bbf6bc7a9023d04bf952644328c.png)

**Option 2 - Icon Element (Deprecated (but perfectly functional))**

- **Create** a workflow that runs On App Load.
- **Create** a Custom Javascript node in the workflow.
- **Paste** this in the code to import the Phosphor Icon Library when the App Loads.

```auto
  if(!window["scp-loading-15897517-8d61-48d2-867a-87021c779f08"]) {
    window["scp-loading-15897517-8d61-48d2-867a-87021c779f08"] = true;
    let doc;
    /* Adding script from https://unpkg.com/@phosphor-icons/web */
    doc = document.createElement('script');
    doc.src = 'https://unpkg.com/@phosphor-icons/web';
    document.body.appendChild(doc);
  }

```

> NOTE: Done using [https://weweb-embed.statechange.ai](https://weweb-embed.statechange.ai) to Convert Javascript and CSS Tags to Weweb Actions and the Current Phosphor Unpkg file ([https://unpkg.com/@phosphor-icons/web](https://unpkg.com/@phosphor-icons/web)).

- **Create** an component that takes a String as a Parameter / Input.
- **Place** an Icon Element (Deprecated) inside it.
- **Bind** something like: `"ph ph-"+{{icon_name}}` in the icon’s value.

**And that should be it!**

Here are the links for the common icon libraries where you can also find the names for each icon.

- [Phosphor Icons](https://phosphoricons.com/)
- [Material Symbols & Icons - Google Fonts](https://fonts.google.com/icons?icon.size=24&icon.color=%23e3e3e3&icon.platform=web)

I changed to the current version when it came out, but due to the “only one icon is visible on deployment” thing, I switched back. Having an Icon Component was a huge plus, because I just changed a bit of the binding in it, and all the icons in the app started working again.

Hope this helps.

Best,  
Bruno

---

_[View the full topic](https://community.weweb.io/t/weweb-icons-library/19095)._