# Power Chart icons

**URL:** <https://forum.inductiveautomation.com/t/power-chart-icons/82615>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 2, 2023, 2:20am UTC](https://forum.inductiveautomation.com/t/power-chart-icons/82615 "2023-12-02T02:20:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bwirth](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bwirth](https://forum.inductiveautomation.com/u/bwirth)\
**Post date:** [December 2, 2023, 2:20am UTC](https://forum.inductiveautomation.com/t/power-chart-icons/82615/1 "2023-12-02T02:20:18Z")

</div>

I'm probably just not as smart as I think I am but are these Powerchart icons available anywhere for use to place on elsewhere on Perspective screens. Mainly looking for the pan and zoom, xTrace and Annotation icons. I don't see them directly in the material library and they don't appear to be in the Ignition one either... I did see the reverse of the annotation one in the material library.

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

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [December 2, 2023, 5:09am UTC](https://forum.inductiveautomation.com/t/power-chart-icons/82615/2 "2023-12-02T05:09:41Z")

</div>

Here is a post with a tool that opens up the actual Material Symbols available from google fonts.

> [@Adding Icons to Perspective Icon Library](https://forum.inductiveautomation.com/t/adding-icons-to-perspective-icon-library/80357/6):
>
> [20231013\_165644] [icon\_management.zip](https://forum.inductiveautomation.com/uploads/short-url/76BfQfBUqGgkAtL8DWpB8FdqQWA.zip) (40.4 KB) All props go to @CalebM, this is his baby. You can: View all icon libraries Create new icon libraries Delete icon libraries Add icons to a library (either by uploading SVGs or a zip of SVGs) Delete icons from a library Use at your own risk. It's not too far away from an exchange release, but anything involving reading and writing to the gateway filesystem is a big deal. I don't want anything to do with bork-ing someone's production gateway be…

I'm not sure if IA grabbed the icons from the Materials Library in this case or if they created them manually. I'll admit it is surprising that those Icons are not readily available.

That being said, here are the main four from the power chart, just paste the JSON onto your view.

```python
[{
	"meta": {
	  "name": "annotation"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 290
	},
	"props": {
	  "elements": [
		{
		  "d": "M18,6c0.552285,0 1,0.447715 1,1v12l-3,-2h-10c-0.552285,0 -1,-0.447715 -1,-1v-9c0,-0.552285 0.447715,-1 1,-1h12Zm-2,7h-8v1h8v-1Zm0,-2h-8v1h8v-1Zm0,-2h-8v1h8v-1Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "rangeBrush"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 261
	},
	"props": {
	  "elements": [
		{
		  "d": "M10,15v4h4v-4h1v4c0,0.552285 -0.447715,1 -1,1h-4c-0.552285,0 -1,-0.447715 -1,-1v-4h1Zm6,-7l5,5l-5,4v-3h-8.06178v3l-4.93822,-4l4.93822,-5v3h8.06178v-3Zm-2,-3c0.552285,0 1,0.447715 1,1v4h-1v-4h-4v4h-1v-4c0,-0.552285 0.447715,-1 1,-1h4Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "xTrace"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 237
	},
	"props": {
	  "elements": [
		{
		  "d": "M15,17v3h-2v-3h2Zm-4.77865,-6.8322l0.0961086,0.0729421l1.68219,1.44132v2.635l-2.18865,-1.87506l-4.02165,5.17194l-1.5787,-1.22788l4.66667,-6c0.325497,-0.418497 0.914468,-0.505473 1.34403,-0.218258Zm4.77865,2.8322v3h-2v-3h2Zm3.21065,-4.61394l1.5787,1.22788l-3.7897,4.87112v-3.258l2.211,-2.841Zm-3.21065,0.613941v3h-2v-3h2Zm0,-4v3h-2v-3h2Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "panAndZoom"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 213
	},
	"props": {
	  "elements": [
		{
		  "d": "M12,5l3,3h-2l-0.001,3h3.001v-2l3,3l-3,3v-2h-3.001l0.001,3h2l-3,3l-3,-3h2l-0.001,-3h-2.999v2l-3,-3l3,-3v2h2.999l0.001,-3h-2Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
}]

```

If you want them to appear exactly as they do in the power chart, then you'll need to use a little CSS.

The class that IA uses is `ia_powerChartComponent__icon` (NOTE: Two underscores prior to icon).

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [December 2, 2023, 8:05pm UTC](https://forum.inductiveautomation.com/t/power-chart-icons/82615/4 "2023-12-02T20:05:46Z")

</div>

> [@Jasper\_Monroe](#):
>
> Are there any compatibility issues or limitations when using custom SVG icons from sources like Google Fonts' Material Symbols

None at all, IA provides some of the Google Fonts material symbols with Ignition

---

<div class="post-metadata">

**Author:** ![bwirth](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@bwirth](https://forum.inductiveautomation.com/u/bwirth)\
**Post date:** [December 3, 2023, 8:27pm UTC](https://forum.inductiveautomation.com/t/power-chart-icons/82615/6 "2023-12-03T20:27:05Z")

</div>

Thank you. These worked well for my use case.