# Use custom svg for navicon

**URL:** <https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637>\
**Category:** Ignition Early Access\
**Created:** [September 28, 2019, 12:32pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637 "2019-09-28T12:32:49Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [September 30, 2019, 5:11pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/2 "2019-09-30T17:11:20Z")

</div>

Hi @nader.chinichian, the best way to do this is to create your own SVG icon sprite file in the same format as the material or ignition icon sprite files (format show below). This file will then live under the `<gateway install>\data\modules\com.inductiveautomation.perspective\icons` directory (you’ll see the `material` and `ignition` icon sprites in this directory). You’ll then reference your icon by `sprite-file-name\icon-id` inside of the designer.

### SVG Icon Sprite File Format

```auto
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 16 16">
		<g class="icon" id="about">
			<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07 -6,2.68629 -6,6c1.44847e-07,3.31371 2.68629,6 6,6c3.31371,-1.44847e-07 6,-2.68629 6,-6l5.32907e-15,2.62268e-07c0,-3.31371 -2.68629,-6 -6,-6Zm2,8.75v0c0,0.138071 -0.111929,0.25 -0.25,0.25h-3.5h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h0.75v-2h-0.75h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h2.49l-1.1365e-08,1.77636e-15c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v2.74h0.75h-1.09278e-08c0.138071,-6.03528e-09 0.25,0.111929 0.25,0.25Zm-2.74,-6.75h1.48h-1.1365e-08c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v1.48v0c0,0.143594 -0.116406,0.26 -0.26,0.26h-1.48h-1.1365e-08c-0.143594,-6.27669e-09 -0.26,-0.116406 -0.26,-0.26v-1.48l3.55271e-15,-3.92589e-08c2.16821e-08,-0.143594 0.116406,-0.26 0.26,-0.26Z"></path>
		</g>
	</svg>
	
    ...

</svg>

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637)._