I need a search icon button icon in my compoonent. I have got the code as well. Below is the link from where i have referred the code.


The problem that i am facing is for the svg.

the error says "Failed to save AddressSearch.cmp: No COMPONENT named markup://svg found : [markup://c:AddressSearch]: Source"

If there is no svg. how i create one for this kind of button???

 <button class="slds-button slds-button_icon slds-button_icon-brand" title="Search">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
<span class="slds-assistive-text">Search</span>

2 Answers 2


You don't need SVG for this. You can use lightning:icon tag for this

<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
    <lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" />

Here is your output

enter image description here

The above code will work but in case you need the complete code with css(Note: it include some other stuff as well) , you can found that here.


You need to use the lighting icon, in lighting components, you don't need to use SVG directly.

Just specify icontype:iconname

<lightning:icon iconName="utility:search" alternativeText="XML" />

Not the answer you're looking for? Browse other questions tagged or ask your own question.