I have a page header component that I have built using the SLDS styling, but I since SVG tags aren't allowed in lightning components, I can't use the my custom icon (my custom object uses the airplane tab icon).

I have tried <lightning:icon name="custom:custom20" />, but it just leaves me with a square that has the color of the icon, but not the shape.

Image of icon not rendering as expected.

Is this behavior supposed to be possible?

2 Answers 2


It should be iconName, not name. Also, make sure you're either in SLDS (e.g. LEX) or using SLDS (e.g. <apex:application extends="force:slds">). Here's a working example:

<aura:application extends="force:slds">
    <lightning:icon iconName="custom:custom20" />

You have to specify iconName instead of name

<lightning:icon iconName="custom:custom20" />

iconName : 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .