SVG Usage in salesforce Lightning Components


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

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.


Create a sample SVG Icon:

Step 1:

  • Create a new Lightning Component and it must be implemented with flexipage:availableForAllPageTypes.
<aura:component implements="flexipage:availableForAllPageTypes">
   <p>SVG Example</p>
Step 2:

Then Create a SVG from the component bundle. click on the SVG in Component bundle it automatically creates a section for you.

User-added image

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

<?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;" />

This sample code is example of polygon icon..

Step 3:

Now Go to Home > Settings > Edit Page


Screen Shot 2019-01-13 at 10.18.54 PM.png

Yes, now we created a lightning component with your wished SVG Icon.

we can create our own SVG in many online websites. For example.(like this : svg-edit

  1. Open  svg-edit
  2. Create your icon and save the file locally
  3. Open the file with VS Code and
  4. Copy the content of the file into the lightning SVG file




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s