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.

Use the variant, size, or class attributes to customize the styling. The variant attribute changes the appearance of an icon. Accepted variants are warning and error. If you want to make additional changes to the color or styling of an icon, use the class attribute.

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>
        
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.
variant String The variant changes the appearance of an icon. Accepted variants include warning and error.