# Using svg icons inside custom component

**URL:** <https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [March 15, 2023, 2:45pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096 "2023-03-15T14:45:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Titus\_Louage](https://avatars.discourse-cdn.com/v4/letter/t/aeb1de/32.png) [@Titus\_Louage](https://forum.inductiveautomation.com/u/Titus_Louage)\
**Post date:** [March 15, 2023, 2:45pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/1 "2023-03-15T14:45:58Z")

</div>

Hello everyone

I would like to use the icons already present inside ignition. (~\Inductive Automation\Ignition\data\_20221121021\modules\com.inductiveautomation.perspective\icons) How can you access these inside React?

While developing I copied the material.svg file and used it succesfully like this: `const iconSheet = require('../icons/material.svg').default;`.  
What path should I use inside of the Ignition module?

A related question I had was how to use custom types inside of the Ignition Designer? Like the icon or color props.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e78482514e7072e7dafc0cc6386817ebca7d74f1.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/cc73735b8ab5971ae8e11018ed96bb8d4e3b9512.png)

---

<div class="post-metadata">

**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\
**Post date:** [March 15, 2023, 3:46pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/2 "2023-03-15T15:46:48Z")

</div>

@victordcq would you know the answer?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 15, 2023, 4:17pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/3 "2023-03-15T16:17:50Z")

</div>

You get a color picker (or an icon picker) at design time if you set a key in your JSON schema for `format` to `"icon-path"` or `"color"`.

To render an icon at runtime, import IconRenderer and IconRendererConfig from `'@inductiveautomation/perspective-client'`.

---

<div class="post-metadata">

**Author:** ![louagejasper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/louagejasper/32/86311_2.png) [@louagejasper](https://forum.inductiveautomation.com/u/louagejasper)\
**Post date:** [March 15, 2023, 4:34pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/4 "2023-03-15T16:34:32Z")

</div>

@paul-griffith, cool! What other options are there? And where would this be documented?  
I've seen dropdown-options, style option to a style-property, how about those?

With this renderer, you can just insert a path like 'material/iconname'?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 15, 2023, 4:39pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/5 "2023-03-15T16:39:00Z")

</div>

Some of the possible format and schema options are listed in the example image component schema:

> <https://github.com/inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/common/src/main/resources/radimage.props.json>

We should definitely do a better job listing them in one cohesive location though. There's a fair number of special formats we use internally.

---

<div class="post-metadata">

**Author:** ![Titus\_Louage](https://avatars.discourse-cdn.com/v4/letter/t/aeb1de/32.png) [@Titus\_Louage](https://forum.inductiveautomation.com/u/Titus_Louage)\
**Post date:** [March 15, 2023, 5:26pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/6 "2023-03-15T17:26:34Z")

</div>

Thanks again Paul. It works, using IconRenderer makes it really easy. Also the color picker and icon-paths do work!

---

<div class="post-metadata">

**Author:** ![Tyler\_Dolan](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@Tyler\_Dolan](https://forum.inductiveautomation.com/u/Tyler_Dolan)\
**Post date:** [March 17, 2023, 4:35pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/7 "2023-03-17T16:35:12Z")

</div>

I'm having troubles getting this solution to work. When I use IconRenderer, it results in a blank (white square) svg element.

In my code I have:

```auto
<IconRenderer path={"./enterprise.svg"} style={{width: 20, height: 20}} color={'red'}/>

```

where enterprise.svg is an svg I put in the same directory as the code.

The blank svg in the chrome element inspector looks like:

```auto
<svg viewBox="0 0 24 24" class="" data-icon="./enterprise.svg" style="fill: red; width: 20px; height: 20px;"></svg>

```

enterprise.svg looks like:

```auto
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11 19.95V18Q10.175 18 9.588 17.413Q9 16.825 9 16V15L4.2 10.2Q4.125 10.65 4.062 11.1Q4 11.55 4 12Q4 15.025 5.988 17.3Q7.975 19.575 11 19.95ZM17.9 17.4Q18.925 16.275 19.462 14.887Q20 13.5 20 12Q20 9.55 18.638 7.525Q17.275 5.5 15 4.6V5Q15 5.825 14.413 6.412Q13.825 7 13 7H11V9Q11 9.425 10.713 9.712Q10.425 10 10 10H8V12H14Q14.425 12 14.713 12.287Q15 12.575 15 13V16H16Q16.65 16 17.175 16.387Q17.7 16.775 17.9 17.4ZM12 22Q9.925 22 8.1 21.212Q6.275 20.425 4.925 19.075Q3.575 17.725 2.788 15.9Q2 14.075 2 12Q2 9.925 2.788 8.1Q3.575 6.275 4.925 4.925Q6.275 3.575 8.1 2.787Q9.925 2 12 2Q14.075 2 15.9 2.787Q17.725 3.575 19.075 4.925Q20.425 6.275 21.212 8.1Q22 9.925 22 12Q22 14.075 21.212 15.9Q20.425 17.725 19.075 19.075Q17.725 20.425 15.9 21.212Q14.075 22 12 22Z"/></svg>

```

I'm able to get enterprise.svg to render if I copy and paste the whole svg element directly into the program, but I'd rather not do that for all of the icons I need.

Am I using IconRenderer correctly? I've been stuck on this for a while.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 17, 2023, 4:40pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/8 "2023-03-17T16:40:22Z")

</div>

IconRenderer is for using our built in icon management mechanism, e.g. `{path: 'material/chevron_right'}`; if you already have an SVG you want to display I think you just embed and display it in the 'traditional' React way?

---

<div class="post-metadata">

**Author:** ![Tyler\_Dolan](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@Tyler\_Dolan](https://forum.inductiveautomation.com/u/Tyler_Dolan)\
**Post date:** [March 17, 2023, 4:42pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/9 "2023-03-17T16:42:15Z")

</div>

Gotcha.  
I was having a similar problem with the traditional react ways (blank svg elements), so I thought this might be a solution.  
Thanks for the info!

---

<div class="post-metadata">

**Author:** ![Adarsh\_K](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@Adarsh\_K](https://forum.inductiveautomation.com/u/Adarsh_K)\
**Post date:** [May 22, 2024, 12:28pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/10 "2024-05-22T12:28:24Z")

</div>

Hi , I Am new to Ignition SDK and have limited knowledge on Java .

Can you Please let me know where is the actual bananatime.gif file residing in the ignition-sdk-examples. and i cant even find this directory /res/radcomponents/img/

How are we rendering the image via url

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [May 22, 2024, 5:16pm UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/11 "2024-05-22T17:16:01Z")

</div>

> [@Adarsh\_K](#):
>
> Can you Please let me know where is the actual bananatime.gif file residing in the ignition-sdk-examples. and i cant even find this directory /res/radcomponents/img/

It's in the gateway scope, under `resources/mounted/img/bananatime.gif`.

> **[ignition-sdk-examples/perspective-component/gateway/src/main/resources/mounted/i...](https://github.com/inductiveautomation/ignition-sdk-examples/tree/master/perspective-component/gateway/src/main/resources/mounted/img)**
>
> Ignition SDK Example Projects. Contribute to inductiveautomation/ignition-sdk-examples development by creating an account on GitHub.

This folder is then mounted in the `GatewayHook` by:

```python
    @Override
    public Optional<String> getMountedResourceFolder() {
        return Optional.of("mounted");
    }

```

---

<div class="post-metadata">

**Author:** ![Adarsh\_K](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@Adarsh\_K](https://forum.inductiveautomation.com/u/Adarsh_K)\
**Post date:** [May 23, 2024, 6:58am UTC](https://forum.inductiveautomation.com/t/using-svg-icons-inside-custom-component/71096/12 "2024-05-23T06:58:55Z")

</div>

> [@bmusson](#):
>
> resources

Goccha ! Thank you @bmusson