Icon

A lightning-icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own. You can specify an icon from the Lightning Design System using the icon-name attribute.

Here is an example.

Alternatively, you can provide a custom icon using the src attribute. See the Using Your Own Icons section.

lightning-icon provides you with icons in the Salesforce Lightning Design System (SLDS). Visit icons to view the available icons.

You can use a combination of the variant, size, and class attributes to customize the icon styling.

When applying SLDS classes or icons, check that they are available in the SLDS release tied to your org. The latest SLDS resources become available only when the new release is available in your org.

Adjust icon sizes using the size attribute with one of these values.

• medium is the default size, which creates a 32px by 32px icon
• small creates a 24px by 24px icon
• x-small creates a 16px by 16px icon
• xx-small creates a 14px by 14px icon
• large creates a 48px by 48px icon

Variants are supported only for the utility icons. To change the appearance of a utility icon, use the variant attribute with one of these values.

• inverse adds a white fill to a utility icon, useful for dark backgrounds
• error adds a red fill to a utility icon to call out a user- or system-related error
• success adds a green fill to a utility icon to represent a successful operation
• warning adds a yellow fill to a utility icon to advise caution

This example uses the error variant to add a red fill to the error utility icon.

To apply additional styling, use the SLDS utility classes with the class attribute. For example, you can set class="slds-m-vertical_large" or other margin classes to add spacing around the icon.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Icons: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

Use the src attribute to specify the path of the resource for your icon. When this attribute is present, lightning-icon attempts to load an icon from the provided resource.

Define a static resource in your org and upload your icon's SVG resource to it. The SVG code must include a <g> element with an id that you can reference.

For example, suppose your static resource is named mySVG_icon and it contains this google.svg content.

Import the SVG resource into your component, and set a variable to the static resource URL plus the <g> ID.

Pass the static resource variable in the src attribute.

For more information about static resources and using SVG, see Access Static Resources and Use SVG Resources in the Lightning Web Components Developer Guide.

Note that icons you import have a default fill attribute value #fff, which you can override in your svg sprite directly. For example, change the color to a shade of green by inserting fill=#648079 in the <svg> element.

Alternatively, use CSS custom properties to change the fill color on your imported icon. See the non-utility icon example in the Customize Component Styling section.

Use the alternative-text attribute to describe the icon for assistive devices. The description should indicate what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.

Sometimes an icon is decorative and does not need a description. But icons can switch between being decorative or informational based on the screen size. If you choose not to include an alternative-text description, check smaller screens and windows to ensure that the icon is decorative on all formats.

Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.