SVG Icons

1. Get your SVG code

If using the Icon Factory, use the settings below.

Icon size

Use the default setting. We will override this later

Leave the "Make the icon responsive" box unchecked

Title Text

Enter descriptive text here – think of this as the "alt" tag for your icon

Web Link

Leave this unchecked. We will hand code the link for this icon

Color Selection

Click the color of your choice

Once you have selected your icon and made the appropriate configurations, copy the SVG code from the text box on the right.

2. Paste the code onto your page

Inside UNLcms, find the page you want to add your icon to, then switch the text editor from WYSIWYG to HTML mode, and paste it in.

In this example, I have a WDN grid set already configured. Learn more about the WDN Grid Framework.

3. Build your link

For this demo, we want to have an icon above some text, and we want both the icon and the text to be clickable. To get this to work, structure your HTML like so:

1. Wrap your SVG in an <a> tag pointed to the link of your choice.

<a href="http://your-link-here.com">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30" height="30" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
 <path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
 <path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>

</a>

2. Add a classname to your link so we can target it with CSS later.

<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30" height="30" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
 <path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
 <path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>

</a>

3. Add the link text underneath your icon. Since we want the link to go around the SVG and the text, we need to use a span instead of a heading.

<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30" height="30" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
 <path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
 <path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>

<span class="wdn-brand">Contact Us</span>

</a>

For this demo, I'm using one of the WDN classnames to style the text the way I want. Learn more about the WDN classnames and selectors for text styles.

Let's see what our link looks like so far.

Our link is working the way we want, but we need to make a couple of changes to our SVG code so it goes as wide as the WDN column that it's in.

4. Delete the width and height properties from the SVG tag.

<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30" height="30" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
 <path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
 <path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>

<span class="wdn-brand">Contact Us</span>

</a>
</a>

5. Add the class "wdn-stretch" to the SVG tag.

<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG wdn-stretch" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
 <path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
 <path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>

<span class="wdn-brand">Contact Us</span>

</a>

Let's see what that did to our icon.

It's looking better. Now we can start adding CSS to our link to get it to appear the way we want.

4. Style your link in its default state

For this demo, we want the text to be larger and centered underneath the icon. Here's the CSS we need to make that happen.

This ensures that only links with the class "icon-link" will get the styles we're writing applied to them.

This is a more complicated CSS property, but basically here we're telling the link not to display like text in the middle of a paragraph but like its own block of content. This allows us to control things like margin and text alignment.

This makes the font larger

This reduces the space between the text and the SVG icon. Think of CSS line-height the way you think of spacing in Microsoft Word. 2 is double spaced, 1.5 is one and a half spaced, 1 is single spaced.

Centers the text inside the link

Makes both the text and the icon the same color

Put it all together:

a.icon-link {

 display: block;

 font-size: 3em;

 line-height: 1;

 text-align: center;

 color: #d00000;

}

Looking good! Now we want to add a hover effect.

5. Style your link in its hover state

For this demo, we want to change the opacity of the link when it's hovered over.

The highlighted code ensures the styles we're adding only get applied when hovering over the link.

In CSS, opacity is measured from 0 to 1, so this will make our link 60% opacity when hovered over.

Put it all together:

a.icon-link:hover {

 opacity: 0.6;

}

Hover over the link below to see the hover effect applied:

Nice! But notice how when you move your mouse over and away from the link, it goes straight from 60% to 100% opacity? It might look nice if it could subtly fade between full and partial opacity. Let's change our CSS to create that effect.

a.icon-link {

 display: block;

 font-size: 3em;

 line-height: 1;

 text-align: center;

 color: #d00000;

 transition: opacity 0.2s;

}

The CSS transition property can let you create a lot of interesting effects, but in this case, what we're doing is telling the CSS to put a transition on the opacity property, and that the transition should take 0.2 seconds. This property must be added to the default styles of the link, not as part of the hover styles.

Let's see how that fade is looking.

Fancy!

6. Add your styles to your site's CSS

Inside of UNLcms, go to the Appearance section of your site and click "Settings."

Paste your styles into the CSS box at the top, then scroll down to the bottom of the page and hit "Save Configuration".

Now if we want, we can put two different icons and links with the same classname in the grid set, and they will get the same styles applied.

The finished product

The HTML

<div class="bp640-wdn-grid-set-thirds">
<div class="wdn-col">
<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG wdn-stretch" style="fill: rgb(208, 0, 0);"><title>Envelope</title>
<g>
<path d="M22.708,4.976l-10.394,8.413C12.223,13.463,12.111,13.5,12,13.5s-0.223-0.037-0.315-0.111L1.292,4.976 C1.111,5.276,1,5.624,1,6v11c0,1.103,0.897,2,2,2h18c1.103,0,2-0.897,2-2V6C23,5.624,22.889,5.276,22.708,4.976z"></path>
<path d="M21.988,4.271C21.695,4.104,21.361,4,21,4H3C2.639,4,2.305,4.104,2.012,4.271L12,12.357L21.988,4.271z"></path>
</g>
</svg>
<span class="wdn-brand">Contact Us</span>
</a>
</div>
<div class="wdn-col">
<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG wdn-stretch" style="fill: rgb(208, 0, 0);"><title>Users</title>
<g id="Filled_Icons">
 <g>
 <path d="M20.803,16.381C21.525,15.833,22,14.974,22,13.998c0-1.655-1.346-3-3-3c-0.805,0-1.533,0.323-2.072,0.84 c0.108,0.413,0.184,0.839,0.184,1.285c0,0.886-0.244,1.708-0.647,2.431c0.198,0.316,0.439,0.605,0.737,0.829 c-0.255,0.112-0.495,0.253-0.726,0.409c1.319,1.035,2.268,2.51,2.63,4.206H23c0.276,0,0.5-0.224,0.5-0.5 C23.5,18.659,22.388,17.078,20.803,16.381z"></path>
 <path d="M7.527,16.795c-0.231-0.156-0.473-0.298-0.728-0.411c0.298-0.226,0.539-0.514,0.737-0.83 c-0.403-0.723-0.647-1.545-0.647-2.431c0-0.446,0.076-0.872,0.184-1.285c-0.539-0.518-1.268-0.84-2.072-0.84c-1.654,0-3,1.345-3,3 c0,0.975,0.475,1.835,1.197,2.383C1.612,17.078,0.5,18.659,0.5,20.499c0,0.276,0.224,0.5,0.5,0.5h3.896 C5.259,19.303,6.207,17.829,7.527,16.795z"></path>
 <g>
 <path d="M6.859,9.507c-0.107,0-0.215-0.034-0.306-0.105C6.335,9.233,6.295,8.919,6.464,8.701C7.801,6.976,9.819,5.987,12,5.987 c2.18,0,4.197,0.989,5.534,2.714c0.169,0.218,0.129,0.532-0.089,0.701c-0.218,0.17-0.532,0.129-0.701-0.09 C15.598,7.835,13.869,6.987,12,6.987c-1.87,0-3.599,0.848-4.746,2.327C7.156,9.441,7.008,9.507,6.859,9.507z"></path>
 </g>
 <g>
 <path d="M4.986,7.844c-0.11,0-0.221-0.036-0.313-0.111C4.457,7.56,4.424,7.245,4.597,7.03C6.411,4.778,9.109,3.487,12,3.487 c2.885,0,5.58,1.288,7.395,3.534c0.174,0.215,0.14,0.53-0.074,0.703c-0.215,0.175-0.53,0.141-0.703-0.074 C16.993,5.64,14.581,4.487,12,4.487c-2.586,0-5.001,1.156-6.624,3.17C5.277,7.78,5.132,7.844,4.986,7.844z"></path>
 </g>
 <g>
 <path d="M21.023,6.354c-0.148,0-0.294-0.064-0.392-0.189C18.529,3.51,15.383,1.987,12,1.987c-3.38,0-6.523,1.519-8.623,4.167 C3.205,6.371,2.891,6.407,2.675,6.235C2.458,6.063,2.422,5.749,2.594,5.533C4.885,2.644,8.314,0.987,12,0.987 c3.69,0,7.122,1.662,9.415,4.557c0.171,0.217,0.135,0.531-0.082,0.703C21.241,6.319,21.131,6.354,21.023,6.354z"></path>
 </g>
 <path d="M18.276,22.367c-0.061-2.647-1.771-4.888-4.137-5.749c1.178-0.725,1.973-2.014,1.973-3.494 c0-2.267-1.844-4.111-4.111-4.111s-4.111,1.844-4.111,4.111c0,1.481,0.795,2.771,1.973,3.494c-2.41,0.877-4.139,3.185-4.139,5.895 c0,0.277,0.224,0.5,0.5,0.487c0,0,11.568,0,11.575,0c0.276,0,0.5-0.21,0.5-0.487C18.297,22.462,18.29,22.413,18.276,22.367z"></path>
 </g>
</g>
<g id="Outline_Icons" display="none">
 <g display="inline">
 <g>
 
 <circle fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="5" cy="13.999" r="2.5"></circle>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.578,20.499H1 c0-2.208,1.79-4,4-4c1.325,0,2.499,0.644,3.227,1.636"></path>
 </g>
 <g>
 
 <circle fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="19" cy="13.999" r="2.5"></circle>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.771,18.136 c0.728-0.992,1.902-1.637,3.229-1.637c2.21,0,4,1.792,4,4h-5.578"></path>
 </g>
 
 <circle fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="12" cy="13.124" r="3.611"></circle>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.859,9.007 C8.048,7.474,9.907,6.487,12,6.487c2.09,0,3.95,0.987,5.139,2.52"></path>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M4.986,7.344 C6.636,5.296,9.163,3.987,12,3.987c2.83,0,5.355,1.306,7.006,3.348"></path>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2.985,5.843 C5.091,3.188,8.345,1.487,12,1.487c3.658,0,6.916,1.707,9.022,4.368"></path>
 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.777,22.513 H6.223c0-3.191,2.585-5.778,5.777-5.778C15.191,16.735,17.777,19.322,17.777,22.513z"></path>
 </g>
</g>
</svg>
<span class="wdn-brand">About Us</span>
</a>
</div>
<div class="wdn-col">
<a href="http://your-link-here.com" class="icon-link">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" class="Filled_SVG wdn-stretch" style="fill: rgb(208, 0, 0);"><title>Question Dialogue Bubble</title>
<path d="M11.996,0.902c-6.617,0-12,4.434-12,9.883c0,2.574,1.177,4.985,3.325,6.832l-2.41,4.811C0.816,22.617,0.852,22.847,1,23 c0.097,0.099,0.227,0.151,0.359,0.151c0.071,0,0.143-0.015,0.21-0.047l6.437-2.995c1.278,0.37,2.62,0.559,3.99,0.559 c6.617,0,12-4.434,12-9.883S18.613,0.902,11.996,0.902z M12.496,16.402c-0.552,0-1-0.447-1-1c0-0.552,0.448-1,1-1s1,0.448,1,1 C13.496,15.955,13.048,16.402,12.496,16.402z M12.996,12.367v0.784c0,0.276-0.224,0.5-0.5,0.5s-0.5-0.224-0.5-0.5v-1.249 c0-0.276,0.224-0.5,0.5-0.5c1.378,0,2.5-1.107,2.5-2.469s-1.122-2.469-2.5-2.469c-1.355,0-2.5,1.173-2.5,2.563 c0,0.275-0.224,0.5-0.5,0.5s-0.5-0.225-0.5-0.5c0-1.965,1.57-3.563,3.5-3.563s3.5,1.556,3.5,3.469 C15.996,10.678,14.69,12.126,12.996,12.367z"></path>
</svg><span class="wdn-brand">FAQs</span>
</a>
</div>
</div>

The CSS

a.icon-link {

font-size: 3em;

line-height: 1;

text-align: center;

display: block;

color: #d00000;

transition: opacity .2s;

}



a.icon-link:hover {

opacity: .6;

}