Written by: Becky Aiken | IANR Media
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.
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.
PNG 25px
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.
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.
How do you add the icons to your website?
Method 1: Link to the file
Download the icons you want to use from the Box folder.
Upload the image file to your website. Rename the file if it contains extra characters.
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.
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.
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>