lightning:icon

Represents a visual element that provides context and enhances usability.

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.

Visit https://lightningdesignsystem.com/icons to view the available icons.

Here is an example.

<aura:component>
    <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
</aura:component>

Use the variant, size, or class attributes to customize the styling. The variant attribute changes the appearance of a utility icon. For example, the error variant adds a red fill to the error utility icon.

<lightning:icon iconName="utility:error" variant="error"/>

If you want to make additional changes to the color or styling of an icon, use the class attribute.

Usage Considerations

When using lightning:icon in a standalone app, extend force:slds to resolve the icon resources correctly.

<aura:application extends="force:slds">
    <lightning:icon iconName="utility:error" variant="error"/>
</aura:application>
Accessibility

Use the alternativeText attribute to describe the icon. 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 alternativeText description, check smaller screens and windows to ensure that the icon is decorative on all formats.

Attributes

Attribute Name Attribute Type Description Required?
alternativeText String The alternative text used to describe the icon. This text should describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
iconName String The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. Yes
size String The size of the icon. Options include xx-small, x-small, small, medium, or large. This value defaults to medium.
title String Displays tooltip text when the mouse moves over the element.
variant String The variant changes the appearance of a utility icon. Accepted variants include inverse, warning and error. Use the inverse variant to implement a white fill in utility icons on dark backgrounds.