# Power Chart icons

**URL:** <https://forum.inductiveautomation.com/t/power-chart-icons/82615>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**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:** 1\
**Showing post:** 2

<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).

---

_[View the full topic](https://forum.inductiveautomation.com/t/power-chart-icons/82615)._