Use custom SVG icon in LWC with static resource

You might have used icons in LWC from the SLDS icons library, but have you every tried using icons which are not present in Salesforce Lightning Design System. In this article we will learn how to use custom SVG icon in LWC using static resource. We just need the SVG snippet for the icons, which we will get it from the web and then use it in our code.

In this article we will cover:

1. Use SVG Icons from the web and upload in static resource.
2. Import and show custom SVG icon in LWC using lightning-icon

Use SVG Icons from the web and upload in static resource

Now, at this point you should already have a custom icon that you to use. If not, then you can visit this website https://icon-sets.iconify.design/ and search for the icon you want.

For this example, we will search for the cloud icon. This will give us the list of available icons with different variants. Select the one you want to use.

After making the selection, scroll down and you should see the section to download the SVG. Click on Download SVG button or copy paste the SVG code in a notepad.

Note: We are not promoting this website in anyway, this is just an example you can use any website you want.

Once downloaded, open the SVG file in a notepad if not already done so, and add a tag <g> around the <path> block. Assign a value to the id attribute of the <g> tag as given below, make sure you remember this value as it will be required later.

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g id="cloud">
<path fill="currentColor" d="M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20h-12Z"/>
</g>
</svg>

Once you have saved the SVG file upload it in the Static Resource.

Import and show custom SVG icon in LWC using lightning-icon

After uploading the SVG file in the static resource. Its now time to import it in the js code of LWC Component.

JS Code

import { LightningElement } from 'lwc';
import cloud from '@salesforce/resourceUrl/cloud';

export default class CustomIconLWC extends LightningElement {
    cloudIcon = cloud+'#cloud';
}

Explanation

In the above code, we are now importing the static resource where we uploaded the SVG file. We also need to append the value we entered in the id parameter of the <g> tag.

In our example, we updated the SVG file to include <g id=”cloud”> and then in the JS file of LWC Component we are appending the same value to the static resource reference.

HTML Code

<template>
    <div>CloudIcon</div>
    <lightning-icon src={cloudIcon}></lightning-icon>
</template>

Now we just need to add reference of the static resource in the src attribute of lightning-icon tag.

Demo

Conclusion

Did you see how easy it is to use custom SVG icon in LWC. If you want to use SLDS icon instead, you can follow our previous article about how to use SLDS icons in LWC with lightning-icon.

If this article was informative and helpful do share it with your colleagues who could benefit from it. Feel free to utilize the code shared in this article in your own org and give it a try.

Do Signup to our Newsletter to receive notification of our latest posts.