How to use SVG Icon in Lightning Component Using Salesforce Lightning Design System

Step 1: Create the Lightning Component

Log into your org, and open the Developer Console. Create a new Lightning component from the menu: File > New > Lightning Component

Name your component: svgIcon

Step 2: Write code in svgIcon.cmp using Component tab

	<aura:attribute name="svgPath" default="" type="String" description="the path for the icon in the static resource, this will be use in a SVG use tag" />
	<aura:attribute name="name" default="" type="String" description="Symbol name of icon" />
	<aura:attribute name="class" default="" type="String" description="the class of this SVG tag, can be use for CSS purpose" />
	<aura:attribute name="containerClass" default="" type="String" description="Container class name for span container of icon" />
	<aura:attribute name="category" default="" type="String" description="Category of icon- action, standard, utility etc." />
	<aura:attribute name="size" default="" type="String" description="Size of icon-- small, medium, large" />
	<aura:attribute name="assistiveText" default="" type="String" description="Description name of icon" />
	<span aura:id="container" class="{!v.containerClass}">
		<span aura:id="assistiveText" class="slds-assistive-text">{!v.assistiveText}</span>

Step 3: Write code in svgIconHelper.js using Helper tab

	renderIcon: function(component) {
		var prefix = "slds-";
		var svgns = "";
		var xlinkns = "";
		var size = component.get("v.size");
		var name = component.get("");
		var classname = component.get("v.class");
		var category = component.get("v.category");

		var containerClassName = [
		].join(' ');
		var iconClassName = prefix+"icon "+prefix+"icon--" + size;
		component.set("v.containerClass", containerClassName);

		var svgroot = document.createElementNS(svgns, "svg");
		svgroot.setAttribute("aria-hidden", "true");
		svgroot.setAttribute("class", iconClassName);
		svgroot.setAttribute("name", name);

		// Add an "href" attribute (using the "xlink" namespace)
		var shape = document.createElementNS(svgns, "use");
		shape.setAttributeNS(xlinkns, "href", component.get("v.svgPath"));

		var container = component.find("container").getElement();
		container.insertBefore(svgroot, container.firstChild);

Step 4: Write code in svgIconRenderer.js using Renderer tab

	render: function(component, helper) {
		// By default, after the component finished loading data/handling events,
		// it will call this render function this.superRender() will call the
		// render function in the parent component.
		var ret = this.superRender();

		// Calls the helper function to append the SVG icon
		return ret;

Step 5: Use the New Component

Now we create new Lightning Component and paste svg component like as below image:


And Now write below code in component:

    <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
    <div class="slds">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#process" category="standard" size="large" name="user" />
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">SVG Icon</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle">Set your SVG</h1>
                <!-- /slds-col-->                        
            <!-- /slds-grid-->                 
        <!-- /slds-page-header-->
	<!-- /slds-->

After the above step, now its time to show preview using Application and this preview is viewing like below image:


Note: Here Static Resource is named SLDS.



8 thoughts on “How to use SVG Icon in Lightning Component Using Salesforce Lightning Design System

  1. Pingback: How to Nested Components in Lightning Component Using Salesforce Lightning Design System | Sushil Kumar

  2. Hi Sushil,

    This is great. I do have one question though, how would you go about adding this component to a VF page? Here’s what I have tried but have not had success. Any assistance you could provide will be appreciated.


  3. Sorry – here is what I have tried so far…

    $Lightning.use(“c:svgIcon”, function() {
    { svgPath : “/resource/LightningDesignSystem/assets/icons/standard-sprite/svg/symbols.svg#user”,
    name=”user” },
    function(cmp) {
    // do some stuff


  4. Hi, I have done all the above steps but I keep getting this error “Uncaught TypeError: Cannot read property ‘expando’ of undefined
    throws at /resource/jquerymin:5:8057”


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s