SVG 102 - Using SVG Icons

Written by: Becky Aiken | IANR Media

UComm Streamline Icons
University Communications has developed UNL’s Iconography library through an online resource called Streamline. These icons are now available to download and use on your websites.

The icons are available to view and download on Box.

Go to the Box Folder

Streamline Icon Folder on Box

They are available in either filled SVG or Line SVG.

Filled SVG

Line SVG

What are SVGs?

SVG stands for Scalable Vector Graphics. It’s an image type that is based on paths instead of pixels, so they are infinitely scalable.

25px PNG

PNG 25px

250px PNG

PNG 250px

SVG 25px

SVG 250px

You can also style SVGs with CSS.

How do you find the icons you want?

We hope to have a more organized icon folder in the future, but in the meantime, I recommend browsing the icon preview on the Streamline website to find the icons you want to use, then searching for them in Box.

View the Icon Preview

Streamline Icon Preview

When you view the Box folder, click "Join Folder to Get Updates" in order to see the search bar. Type your search terms into the search bar and press enter. Then you'll be able to limit your search to the Streamline Folder with the filters on the right.

Searching for Icons in Box

How do you add the icons to your website?

Method 1: Link to the file

 Downloading Icons from Box

Download the icons you want to use from the Box folder.

Upload to UNLcmsUpload the image file to your website. Rename the file if it contains extra characters.

Resize SVG Icon

Insert the image as usual through your WYSIWYG editor. By default, the icons will be 25px by 25px in size. If you want them to be larger, change the dimensions in the insert image window. Be sure to also add an image description, or alt tag, for accessibility.

Note: If you use this method, you won’t be able to change the color of the icon unless you have a vector editing program such as Adobe Illustrator.

 


Method 2: Insert the SVG code onto your page

Download the desired icon from Box. Then, open the file using text editing software, such as Notepad or TextEdit on a Mac. Select the text in the document starting with the <svg> tag and ending with the closing </svg> tag and copy it.

 SVG in a text editor

Go to the page you want to add the icon to and change it from the WYSIWYG editor to the HTML editor. Paste in the SVG code.

 WYSIWYG Editor

If you want to let the width of the icon's container determine the width of the icon, remove the code highlighted below. Otherwise, you can change the width to your desired value.

	<svg version="1.1" id="Filled_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,0.006c-3.86,0-7,3.141-7,7v2c0,1.103,0.897,2,2,2c0.182,0,0.356-0.031,0.523-0.078l3.999,12.729
c0.065,0.208,0.259,0.35,0.477,0.35h0.001c0.219,0,0.412-0.143,0.476-0.352l3.933-12.746c0.188,0.058,0.383,0.098,0.59,0.098
c1.103,0,2-0.897,2-2v-2C19,3.147,15.859,0.006,12,0.006z M18,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1
c0-0.826-0.673-1.5-1.5-1.5S13,8.18,13,9.006v1c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-1c0-0.826-0.673-1.5-1.5-1.5
S8,8.18,8,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-2c0-3.309,2.691-6,6-6s6,2.691,6,6V9.006z"/>
</svg>

If you want to change the color of the icon, add the code highlighted below.

	<svg style="fill: #d00000;" version="1.1" id="Filled_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,0.006c-3.86,0-7,3.141-7,7v2c0,1.103,0.897,2,2,2c0.182,0,0.356-0.031,0.523-0.078l3.999,12.729
c0.065,0.208,0.259,0.35,0.477,0.35h0.001c0.219,0,0.412-0.143,0.476-0.352l3.933-12.746c0.188,0.058,0.383,0.098,0.59,0.098
c1.103,0,2-0.897,2-2v-2C19,3.147,15.859,0.006,12,0.006z M18,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1
c0-0.826-0.673-1.5-1.5-1.5S13,8.18,13,9.006v1c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-1c0-0.826-0.673-1.5-1.5-1.5
S8,8.18,8,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-2c0-3.309,2.691-6,6-6s6,2.691,6,6V9.006z"/>
</svg>

Changing the color is slightly different with the outlined icons. You'll need to change the stroke color highlighted below.


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><g stroke="#d00000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M10.5 9c0-.551-.448-1-1-1-.553 0-1 .449-1 1 0 .829-.672 1.5-1.5 1.5s-1.5-.671-1.5-1.5v-2c0-3.59 2.91-6.5 6.5-6.5s6.5 2.91 6.5 6.5v2c0 .829-.672 1.5-1.5 1.5s-1.5-.671-1.5-1.5c0-.551-.448-1-1-1-.553 0-1 .449-1 1v1c0 .829-.672 1.5-1.5 1.5-.829 0-1.5-.671-1.5-1.5v-1zM16.531 10.422l-4.531 13.078-4.531-13.094"/></g></svg>

See the University Communications Toolbox to get hex values for colors that match the UNL template.

The filled Streamline icons all have an ID, and you will get errors on your Web Audit Report if you have more than one of the same ID on a page, so if you're going to have multiple icons on the same page, go ahead and remove the ID, highlighted below.

	<svg style="fill: #d00000;" version="1.1" id="Filled_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,0.006c-3.86,0-7,3.141-7,7v2c0,1.103,0.897,2,2,2c0.182,0,0.356-0.031,0.523-0.078l3.999,12.729
c0.065,0.208,0.259,0.35,0.477,0.35h0.001c0.219,0,0.412-0.143,0.476-0.352l3.933-12.746c0.188,0.058,0.383,0.098,0.59,0.098
c1.103,0,2-0.897,2-2v-2C19,3.147,15.859,0.006,12,0.006z M18,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1
c0-0.826-0.673-1.5-1.5-1.5S13,8.18,13,9.006v1c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-1c0-0.826-0.673-1.5-1.5-1.5
S8,8.18,8,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-2c0-3.309,2.691-6,6-6s6,2.691,6,6V9.006z"/>
</svg>

Finally, for accessibility, you'll want to add a title to your SVG instead of an alt tag.

	<svg style="fill: #d00000;" version="1.1" id="Filled_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><title>Ice Cream Cone</title>
<path d="M12,0.006c-3.86,0-7,3.141-7,7v2c0,1.103,0.897,2,2,2c0.182,0,0.356-0.031,0.523-0.078l3.999,12.729
c0.065,0.208,0.259,0.35,0.477,0.35h0.001c0.219,0,0.412-0.143,0.476-0.352l3.933-12.746c0.188,0.058,0.383,0.098,0.59,0.098
c1.103,0,2-0.897,2-2v-2C19,3.147,15.859,0.006,12,0.006z M18,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1
c0-0.826-0.673-1.5-1.5-1.5S13,8.18,13,9.006v1c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-1c0-0.826-0.673-1.5-1.5-1.5
S8,8.18,8,9.006c0,0.553-0.449,1-1,1c-0.552,0-1-0.447-1-1v-2c0-3.309,2.691-6,6-6s6,2.691,6,6V9.006z"/>
</svg>

Page Feedback

Was this article helpful?