# Access Perspective icon library in CSS

**URL:** <https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [October 3, 2024, 8:19am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757 "2024-10-03T08:19:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 3, 2024, 8:19am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/1 "2024-10-03T08:19:25Z")

</div>

I want to use the Perspective Icon library in my inline CSS code like the following CSS code:

```python
cursor: url(/system/images/flash.svg), pointer

```

The above code needs icons to be loaded into image management which is inefficient when the graphic is already loaded in the icon library.  
I know we can use a web dev endpoint to expose the icon, but doing so would add unnecessary cost to the project.  
Do we have any workaround for this?  
If not, I believe exposing the icon in Ignition Core for CSS is very useful.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 3, 2024, 8:30am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/2 "2024-10-03T08:30:54Z")

</div>

I did something with the icon materials here:

```python
url('/data/perspective/icons/material.svg#insert_emoticon');

```

> [@\[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/8):
>
> url('/data/perspective/icons/material.svg#insert\_emoticon') hehe you'll need to add some sizes to it [image] might be easier to use it as background img than instead (need a, nonemtpy content still tho) styles=".iaDropdownCommon\_options [data-label='YourLabel']:before { padding:10px; content:' '; background-image: url('/data/perspective/icons/material.svg#insert\_emoticon'); }" [image]

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 3, 2024, 8:48am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/3 "2024-10-03T08:48:44Z")

</div>

> [@victordcq](#):
>
> `url('/data/perspective/icons/material.svg#insert_emoticon')`

This word in browser URL and load icon but here in cursor it render as black box in runtime. Did you test it with cursor on your end?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 3, 2024, 8:52am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/4 "2024-10-03T08:52:55Z")

</div>

In the post i said you'll need something to size it, im guessing you will need it for this too.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 3, 2024, 9:38am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/5 "2024-10-03T09:38:36Z")

</div>

Yes, but I don't know how to add size in CSS

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 3, 2024, 10:48am UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/6 "2024-10-03T10:48:03Z")

</div>

meh seems not to be that easy to add a size to the svg inside a cursor 😕

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 3, 2024, 1:40pm UTC](https://forum.inductiveautomation.com/t/access-perspective-icon-library-in-css/96757/7 "2024-10-03T13:40:57Z")

</div>

This seems very close, but i still dont seem to get it to work by adding a background css like in the dropdown inside the foreign svg div.i just get a black square that has the correct size...

> **[A CSS-only custom cursor](https://css-tip.com/css-custom-cursor/)**
>
> Combine CSS and SVG to create any kind of fancy cursor