Hi,

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 and 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:

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.

Navigation:

Go to Home > Settings > Edit Page
Check the highlighted section (Custom components) in below screenshot

 

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.
 

SVGExample.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
   <p>SVG Example</p>
</aura:component>

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.

 

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.
SVGExample.svg
 

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

Step 3:

Now Go to Home > Settings > Edit Page
Check the component which we created in earlier step and verify the icon.


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.

Thanks,
N