How to use SVG in Salesforce Lightning Component ?

Lightning Component

SVG stands for Scalable Vector Graphics. It is a custom icon resource for components used in Lightning App Builder or Community Builder.

Prerequisites : basic understanding of Lightning Component. and SVG [ You can learn more about SVG at ]

In Lightning Components, The default SVG looks like use SVG Brahmaji Tammanaand if we want to customize this icon to some other icon, we need to create a SVG for our lightning component.

Default SVG looks like below:

use SVG Brahmaji Tammana

What is the use of SVG in Component?  Where we can see it in the Lightning Application ?

SVG icons is used in Salesforce Lightning App Builder or Community Builder.


Go to Home > Settings > Edit Page

use SVG Brahmaji Tammana

Check the highlighted section (Custom components) in below screenshot

use SVG Brahmaji Tammana


Steps to follow to customize this SVG icon/logo:
Step 1:
  • Go to Lightning Component and it must be implemented with flexipage:availableForAllPageTypes.

Note: If you haven’t created any lightning component yet, create a component (SVGExample) and add below code.



<aura:component implements="flexipage:availableForAllPageTypes">
   <p>SVG Example</p>
Step 2:
  • Create a SVG from the component bundle. You just have to click on the SVG in Component bundle it automatically creates a section for you.
use SVG Brahmaji Tammana

Remove existing code and add below code in SVG then Save your lightning component.

Here we are adding the polygon/star as an icon for this component.

[ W3 Schools to apply SVG ( )  See Example 3. ]


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="450" width="450" xmlns="" xmlns:xlink="">
  <polygon points="200,20 80,396 380,156 20,156 320,396"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
Step 3:

Now Go to Home > Settings > Edit Page

use SVG Brahmaji Tammana

Check the component which we created in earlier step and verify the icon.

use SVG Brahmaji Tammana


That’s it my friend.  Happy Coding.


Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. ?

if you have any suggestions or issue with it, you can post in comment box 🙂

About The contributor: 


Leave a Reply