function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

how to refer SVG in my component

I'm new to lightning component. How to refer SVG in my lightning component
NagendraNagendra (Salesforce Developers) 

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.

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
User-added imageCheck the highlighted section (Custom components) in below screenshot
User-added image


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.
User-added image

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.


<?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
User-added imageCheck the component which we created in earlier step and verify the icon.
User-added image

Hope this helps.

Kindly mark this as solved if the reply was helpful so that it gets removd from the unansered queue which results in helping others who are encountering a similar issue.