# How to create new Perspective Component Symbols?

**URL:** <https://forum.inductiveautomation.com/t/how-to-create-new-perspective-component-symbols/107318>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 12, 2025, 11:46am UTC](https://forum.inductiveautomation.com/t/how-to-create-new-perspective-component-symbols/107318 "2025-06-12T11:46:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![christoffer.brinkake](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@christoffer.brinkake](https://forum.inductiveautomation.com/u/christoffer.brinkake)\
**Post date:** [June 12, 2025, 11:46am UTC](https://forum.inductiveautomation.com/t/how-to-create-new-perspective-component-symbols/107318/1 "2025-06-12T11:46:41Z")

</div>

Hello, I am new to Ignition and I have a question in regards to the symbols in the Perspective Components palette.

In the same way that the 5 original symbols are behaving, I would like to add more symbols in the very same manner, with the exact same functionality. My idea is that I extract one of the original symbols, replace the .svg file with my own, and then add the result as a new symbol in the list.

How do I go about doing this? I have many symbols I would like to add.

 ![Skärmklipp](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5ff98b6d8591138b03b0cb1c59175ee21759bd2e.jpeg)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 12, 2025, 1:42pm UTC](https://forum.inductiveautomation.com/t/how-to-create-new-perspective-component-symbols/107318/2 "2025-06-12T13:42:51Z")

</div>

Short of writing your own module, you can't; you need to create these as Views.

However a word of caution: these symbols use a flex container which really doesn't play nicely when embedded into a Coordinate container and you're aligning pipework to the symbols.

I would be creating your View symbols as pure coord containers setting their mode to percent without an aspect ratio (set the aspect ratio on your pnid view instead)

Examples of mis-alignment:  
Designer (ok) :

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

Browser (note the pipes misalignment):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/6804436f104a8d1c2e0689d13dcdc4c36df7f564.png)

The View is a coord view and mode set to percent with the aspect ratio configured as the default size width:height

> **View JSON**
>
> ```python
> {
> "custom": {},
> "params": {},
> "props": {
> "defaultSize": {
> "height": 601,
> "width": 628
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "Pump"
> },
> "position": {
> "height": 0.2093,
> "width": 0.1592,
> "x": 0.293,
> "y": 0.3239
> },
> "type": "ia.symbol.pump"
> },
> {
> "meta": {
> "name": "Valve"
> },
> "position": {
> "height": 0.1661,
> "width": 0.0717,
> "x": 0.492,
> "y": 0.5829
> },
> "type": "ia.symbol.valve"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "aspectRatio": "628:601",
> "mode": "percent",
> "pipes": [
> {
> "appearance": "auto",
> "end": "none",
> "fill": "",
> "flanges": true,
> "lineVariant": "solid",
> "name": "pipe",
> "origin": {
> "connections": [
> {
> "connections": [],
> "x": 0.1784,
> "y": 0.388
> }
> ],
> "x": 0.2998,
> "y": 0.388
> },
> "start": "none",
> "stroke": "",
> "visible": true,
> "width": 10
> },
> {
> "appearance": "auto",
> "end": "none",
> "fill": "",
> "flanges": true,
> "lineVariant": "solid",
> "name": "pipe_0",
> "origin": {
> "connections": [
> {
> "connections": [],
> "x": 0.6686,
> "y": 0.3613
> }
> ],
> "x": 0.4453,
> "y": 0.3613
> },
> "start": "none",
> "stroke": "",
> "visible": true,
> "width": 10
> },
> {
> "appearance": "auto",
> "end": "none",
> "fill": "",
> "flanges": true,
> "lineVariant": "solid",
> "name": "pipe_1",
> "origin": {
> "connections": [
> {
> "connections": [],
> "x": 0.2471,
> "y": 0.637
> }
> ],
> "x": 0.4961,
> "y": 0.637
> },
> "start": "none",
> "stroke": "",
> "visible": true,
> "width": 10
> },
> {
> "appearance": "auto",
> "end": "none",
> "fill": "",
> "flanges": true,
> "lineVariant": "solid",
> "name": "pipe_2",
> "origin": {
> "connections": [
> {
> "connections": [
> {
> "connections": [
> {
> "connections": [],
> "x": 0.7354,
> "y": 0.3646
> }
> ],
> "x": 0.7927,
> "y": 0.3646
> }
> ],
> "x": 0.7927,
> "y": 0.6362
> }
> ],
> "x": 0.5596,
> "y": 0.6362
> },
> "start": "none",
> "stroke": "",
> "visible": true,
> "width": 10
> },
> {
> "appearance": "auto",
> "end": "none",
> "fill": "",
> "flanges": true,
> "lineVariant": "solid",
> "name": "pipe_3",
> "origin": {
> "connections": [],
> "x": 0.8169,
> "y": 0.7741
> },
> "start": "none",
> "stroke": "",
> "visible": true,
> "width": 10
> }
> ]
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

The issue is that the root of the symbols are flex containers, and the symbol scales differently to how the text scales.

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [June 12, 2025, 1:46pm UTC](https://forum.inductiveautomation.com/t/how-to-create-new-perspective-component-symbols/107318/3 "2025-06-12T13:46:30Z")

</div>

Ignition 8.3, released end of this year hopefully, will have something called drawing tools which I think you will find interesting.

> **[Deeper Dive into 8.3: New Features](https://inductiveautomation.com/resources/icc/2024/deeper-dive-into-83-new-features)**
>
> We have even more exciting Ignition 8.3 features to show you! Join us in the second of two sessions as we continue to share what’s new with 8.3. This time, we’re looking at some project-level resources and other features available through the...