How to Use SLDS Icons in LWC with lightning-icon

Icons are widely used in every web application as they not only add visual aesthetics but also add meaning to the context of actions to be performed. Adding Salesforce Lightning Design System (SLDS) icons can significantly enhance the visual appeal of your Lightning components. In this blog post, we will explore how to use SLDS Icons in LWC Using lightning-icon tag.

In this article we will explore the below topics:

1. Learning about different types of icons in SLDS.
2. Finding the right SLDS icon for your use case.
3. How to use SLDS icons in LWC with lighting-icon tag.
4. Customization of SLDS icons in LWC.

Watch the recording here

Learning about different types of icons in SLDS

Icons are symbols used to communicate meanings or context to the users. Each icon have a predefined meaning which makes it easy for the users to understand its intention and improves the overall UX. Icons are found everywhere right from the apps in our mobile phones, to labels in package boxes, signs on roads etc.

In Salesforce, icons are designed carefully to address common use cases in the CRM or web world. They are categorized in four different types:

Utility Icons: These type of icons are simple, single colored that identify as some action in multiple user interfaces. Example: Bookmark, Add, Announcement, Call etc.

Doctype Icons: As the name suggests, a doctype icons is used to represent a specific document type or file format. We can use this to show different types of documents attached to a record. Example: csv, audio, html, excel etc.

Standard & Custom Icons: These icons are used to represent Custom or Standard Objects in Salesforce. If we want to create a custom tab in Salesforce with some account functionality we can use these account icon in the header. Example. Account, Address, Article, Contact etc.

Action Icons: Action icons can be used as quick actions on touch-screen devices. Example: Add File, Close, Delete, Filter etc.

You can learn more about SLDS icons in the Salesforce Documentation here.

Finding the right SLDS icon for your use case

Now that we have a good understanding of different types of Salesforce icons, examples and their basic use cases. We are in right position to start using it for our different use cases.

If we want to simple icons that can be used in multiple form-factors (mobile, desktop, tab etc) we can go ahead with the Utility Icons.

For rendering details about different Salesforce objects, in a custom LWC Component, we can use Standard Icons for each section.

LWC Component where we need to denote a file or document, we can go ahead with Doctype icons or we need to represent actions button on mobile devices we can use the Action icons.

You can also search for icons by typing their names in the search bar of SLDS documentation icon section.

How to use SLDS icons in LWC with lighting-icon tag

You can easily start using SLDS icons in your LWC component by using the lightning-icon tag. All you need to do is enter the name of the icon in icon-name attribute.

There is a simple pattern that you need to follow when entering the icon name, the name should contain the icon type followed by the name of the icon.

HTML Code

<!-- myIconComponent.html -->
<template>
    <div style="background:white;padding:10px">
        <div class="iconBlock">
            <lightning-icon icon-name="standard:account" size="large"></lightning-icon>
            <span>icon-name="standard:account"</span>
        </div>
        <div class="iconBlock">
            <lightning-icon icon-name="utility:add" size="large"></lightning-icon>
            <span>icon-name="utility:add"</span>
        </div>
        <div class="iconBlock">
            <lightning-icon icon-name="doctype:attachment" size="large"></lightning-icon>
            <span>icon-name="doctype:attachment"</span>
        </div>
        <div class="iconBlock">
            <lightning-icon icon-name="action:call" size="small"></lightning-icon>
            <span>icon-name="action:call"</span>
        </div>
    </div>
</template>

Explanation:

In your html code, use the lightning-icon component and set the icon-name attribute to the desired SLDS icon (e.g., “standard:account”). Here “standard” is the type of the icon and “account” is the icon name.

Below is the example to use icons from different categories:

standard:account = Add “standard:account” icon-name in the lightning-icon tag to use the account icon under standard icon type.

utility:add = Add “utility:add” icon-name in the lightning-icon tag to use the add icon under utility icon type.

doctype:attachment = Add “doctype:attachment” icon-name in the lightning-icon tag to use the attachment icon under doctype icon type.

action:call = Add “action:call” icon-name in the lightning-icon tag to use the call icon under action icon type.

This is all you need to add an SLDS icon to your LWC component.

Customization of SLDS icons in LWC

If you further want to customize the look and feel of lightning-icons, you can use the below provided attributed:

Name	Description
alternative-text	Enter the text the appears when user hover’s over the icon.
icon-name	The type:name of the icon that you want to show, as explained above.
size	This controls the size of the icon. Available values are xx-small, x-small, small, medium (default), or large.
src	You can pass the path of custom svg file from staticresource.
variant	These are mainly used for utility icons, using variants we can control the appearance. Below are the available variants: 1. inverse adds a white fill to a utility icon, useful for dark backgrounds. 2.error adds a red fill to a utility icon to call out a user- or system-related error. 3.success adds a green fill to a utility icon to represent a successful operation. 4.warning adds a yellow fill to a utility icon to advise caution.

You can learn more about using lightning-icon tag from Salesforce Documentation here.

Demo

Conclusion:

Integrating SLDS icons into your LWC components using lightning-icon is a straightforward process that enhances the visual appeal of your Salesforce applications. By following the steps outlined in this guide, you can effortlessly incorporate SLDS icons and create a more engaging user interface.

Feel free to utilize the provided code snippets in your personal Salesforce orgs. If you encounter any issues or have suggestions for improvement, please share your feedback in the comments section below.

Don’t forget to subscribe to our newsletter for more insightful Salesforce content, and feel free to share this article with your friends if you find it useful.