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 ConsiderationsWhen 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>
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.
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. |