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. Specify the icon with the iconName attribute.

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

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

Here is an example.

1<aura:component>
2  <lightning:icon
3    iconName="action:approval"
4    size="large"
5    alternativeText="Indicates approval"
6  />
7</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. Variants are supported only for utility icons.

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

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

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

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

Use the alternativeText attribute to describe the icon for assistive technology. 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.

Use the src attribute to specify the path of the resource for the custom icon. When this attribute is present, lightning:icon attempts to load an icon from the provided resource. The iconName attribute is not required when you use a custom icon.

Define a static resource in your org and upload your custom icon’s SVG source to it. The SVG 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.

1<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2  <title>Google icon</title>
3  <g id="google">
4    <path
5      d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
6    />
7  </g>
8</svg>

Reference the custom icon using the resource name and the ID assigned to the <g> element.

1<lightning:icon src="{!$Resource.mySVG_icon + '#google'}" />

For IE11, the custom icon feature is disabled for now due to performance issues.

Overriding the Icon Fill Color of Custom Icons

Note that all the icons have a default CSS fill property 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.

You can’t use CSS to change the fill color in a custom icon.