SVG

How to Use

How to Use SVGs

Examples

Phone Icon
Standalone Icon, Meaningful

Meaningful icons need a title. Think of this as similar to using alt text on an image. Height, width, and text color class can be changed according to usage.

        			
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Phone Icon"><title>Phone Icon</title><use xlink:href="#svgIcon-phone"></use></svg>
Call Us Now!
Standalone Icon, Decorative

Decorative icons (icons that repeat the information conveyed by text or do not add significant value) do not need alternative text and they should be hidden from the screen reader. For this example, hide the SVG with aria-hidden="true" and do not set a title.

        			
<div class="displayFlex flexAlignItemsCenter">
	<svg class="textDarkestGray marginRight10" height="40px" width="40px" aria-hidden="true"><use xlink:href="#svgIcon-phone"></use></svg>
	<a href="#" class="darkestLink">Call Us Now!</a>	
</div>
Linked Icon, No Text

For linked icons that are not paired with text, we can use aria-label on the <a> element to provide descriptive, alternative text. IMPORTANT When using an icon as a link, you must give the <a> a class (ie inlineMiddle) to make it a block element.

        			
<a href="#" aria-label="Call Us Now!" class="darkestLink">
	<svg height="40px" width="40px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-phone"></use></svg>
</a>
Call Us Now!
Linked Icon, with Static Text

Again, for linked icons that are paired with text, let’s use aria-label on the <a> element to provide descriptive, alternative text. With aria-label on the <a> tag, the screen reader does not announce the text inside of the link. IMPORTANT When using an icon as a link, you must give the <a> a class (ie inlineMiddle) to make it a block element.

        			
<a href="#" aria-label="Call Us Now!" class="darkestLink noLine displayFlex flexAlignItemsCenter">
	<svg class="marginRight10" height="40px" width="40px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-phone"></use></svg>
	<span>Call Us Now!</span>
</a>
Notes

ALWAYS set the height and width on the svg.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Logo Icons

4imprint Logos

Examples

Four Icon

Admin site use only

<svg class="textBlue" height="40px" width="40px" role="img" aria-label="Four Icon"><use xlink:href="#svgIcon-four"></use></svg>

4imprint Logo

<svg class="textBlue" height="53px" width="138px" role="img" aria-label="4imprint"><use xlink:href="#svgLogo-4imprint"></use></svg>

4imprint Outlet

<svg height="55px" width="102px" role="img" aria-label="4imprint Outlet"><title>4imprint Outlet</title><use xlink:href="#svgLogo-outlet"></use></svg>

Code
					
<svg class="textBlue" height="53px" width="138px" role="img" aria-label="4imprint"><use xlink:href="#svgLogo-4imprint"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Flag Icons

World Flags

Flags to represent the 4imprint locales.

Examples

Canada Flag

Admin site use only

<svg height="19px" width="29px" role="img" aria-label="Canada Flag"><use xlink:href="#svgIcon-caFlag"></use></svg>

Ireland Flag

Admin site use only

<svg height="19px" width="29px" role="img" aria-label="Ireland Flag"><use xlink:href="#svgIcon-ieFlag"></use></svg>

UK Flag

Admin site use only

<svg height="19px" width="29px" role="img" aria-label="UK Flag"><use xlink:href="#svgIcon-ukFlag"></use></svg>

US Flag

Admin site use only

<svg height="19px" width="29px" role="img" aria-label="US Flag"><use xlink:href="#svgIcon-usFlag"></use></svg>

Code
					
<svg height="19px" width="29px" role="img" aria-label="US Flag"><use xlink:href="#svgIcon-usFlag"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Header/Account Icons

Header/Account

Examples

Main Menu

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Main Menu"><use xlink:href="#svgIcon-menuLines"></use></svg>

My Account

<svg class="textDarkestGray" height="45px" width="45px" role="img" aria-label="My Account"><use xlink:href="#svgIcon-account"></use></svg>

Cart

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Cart"><use xlink:href="#svgIcon-cart"></use> </svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="CVV"><use xlink:href="#svgIcon-cvv"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Social Icons

Social Media

Used to represent 4imprint's social media accounts.

Examples

Facebook

<svg height="40px" width="40px" role="img" aria-label="Facebook"><use xlink:href="#svgIcon-facebook"></use></svg>

Twitter

<svg height="40px" width="40px" role="img" aria-label="Twitter"><use xlink:href="#svgIcon-twitter"></use></svg>

LinkedIn

<svg height="40px" width="40px" role="img" aria-label="LinkedIn"><use xlink:href="#svgIcon-linkedIn"></use></svg>

Instagram

<svg height="40px" width="40px" role="img" aria-label="Instagram"><use xlink:href="#svgIcon-instagram"></use></svg>

YouTube

<svg height="40px" width="40px" role="img" aria-label="YouTube"><use xlink:href="#svgIcon-youTube"></use></svg>

Pinterest

<svg height="40px" width="40px" role="img" aria-label="Pinterest"><use xlink:href="#svgIcon-pinterest"></use></svg>

Code
					
<svg height="40px" width="40px" role="img" aria-label="Twitter"><use xlink:href="#svgIcon-twitter"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Better Choices® Icons

Better Choices® (SM in Canada)

The Better Choices Logo.

Colors:
Green: #4F712A
Blue: #02458b

Examples

Better Choices

<svg height="32px" width="102px" role="img" aria-label="Better Choices"><title>Better Choices</title><use xlink:href="#svgLogo-betterChoices"></use></svg>

Better Choices Icon

<svg height="40px" width="49px" role="img" focusable="false" aria-label="Better Choices Icon"><title>Better Choices Icon</title><use xlink:href="#svgIcon-betterChoices"></use></svg>

Code
					
<svg height="32px" width="102px" role="img" aria-label="Better Choices"><title>Better Choices</title><use xlink:href="#svgLogo-betterChoices"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Favorite Board Icons

Favorite Boards

Examples

Added to Favorites

<svg class="textRed" height="40px" width="40px"><use xlink:href="#svgIcon-heartOutline"></use></svg>

Favorite

<svg class="textLtGray" height="40px" width="40px"><use xlink:href="#svgIcon-heartOutline"></use></svg>

Add Item to Board

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Add Item to Board"><use xlink:href="#svgIcon-addtoBoard"></use></svg>

Create Board

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Create Board"><use xlink:href="#svgIcon-createBoard"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Create Board"><use xlink:href="#svgIcon-createBoard"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Art Library Icons

Art Library

Examples

Art File

<svg height="40px" width="40px" role="img" aria-label="Art File"><use xlink:href="#svgIcon-artFile"></use></svg>

View Larger

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="View Larger"><use xlink:href="#svgIcon-viewLargerEye"></use></svg>

Three Dot Menu

<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-threeDotMenu"></use></svg>

Artwork

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Artwork"><use xlink:href="#svgIcon-artwork"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Artwork"><use xlink:href="#svgIcon-artwork"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Search Icons

Search

Examples

Search

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Search"><use xlink:href="#svgIcon-search"></use></svg>

Recent Search Result

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Recent Search Result"><use xlink:href="#svgIcon-searchHistory"></use></svg>

Search this Term Arrow

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Search this Term"><use xlink:href="#svgIcon-searchArrow"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Search this Term"><use xlink:href="#svgIcon-searchArrow"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Contact Icons

Contact

Examples

Call 4imprint

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Call 4imprint"><use xlink:href="#svgIcon-phone"></use></svg>

Email

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Email"><use xlink:href="#svgIcon-email"></use></svg>

Bubble

<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-bubble"></use></svg>

Comment

<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-comment"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-comment"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Arrow Icons

Arrows

Examples

Arrow Up Line Icon

<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-arrowLine"></use></svg>

Arrow Right Line Icon

<svg class="textDarkestGray rotate90" height="40px" width="40px"><use xlink:href="#svgIcon-arrowLine"></use></svg>

Arrow Down Line Icon

<svg class="textDarkestGray rotate180" height="40px" width="40px"><use xlink:href="#svgIcon-arrowLine"></use> </svg>

Arrow Left Line Icon

<svg class="textDarkestGray rotate270" height="40px" width="40px"><use xlink:href="#svgIcon-arrowLine"></use> </svg>

Solid Arrow Up Icon

<svg class="textDarkestGray" height="40px" width="40px"><use xlink:href="#svgIcon-arrowSolid"></use></svg>

Solid Arrow Right Icon

<svg class="textDarkestGray rotate90" height="40px" width="40px"><use xlink:href="#svgIcon-arrowSolid"></use></svg>

Solid Arrow Down Icon

<svg class="textDarkestGray rotate180" height="40px" width="40px"><use xlink:href="#svgIcon-arrowSolid"></use></svg>

Solid Arrow Left Icon

<svg class="textDarkestGray rotate270" height="40px" width="40px"><use xlink:href="#svgIcon-arrowSolid"></use></svg>

Code
					
<svg class="textDarkestGray rotate270" height="40px" width="40px"><use xlink:href="#svgIcon-arrowSolid"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Trash & Remove Icons

Trash & Remove

Trash icon used for deleting things (products from cart); Remove icon used for removing things (product colors).

Examples

Trash

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Trash"><use xlink:href="#svgIcon-trash"></use></svg>

Remove

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Remove"><use xlink:href="#svgIcon-remove"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Remove"><use xlink:href="#svgIcon-remove"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Close Icons

Close

Icon for closing windows/popups.

Examples

<svg class="show roundCorners3 padding5 margin10" height="15px" width="15px" focusable="false" role="img" aria-label="Close"><use xlink:href="#svgIcon-remove"></use></svg>

Code
					
<button id="buttonIDHere" class="closeIcon roundCorners3">
	<svg class="show roundCorners3 padding5 margin10" height="15px" width="15px" focusable="false" role="img" aria-label="Label Here"><title>Title Here</title><use xlink:href="#svgIcon-remove"></use></svg>
</button>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Hint Icons

Hints

Icons that provide a tooltip or information that shouldn't be missed.

Examples

Hint

<svg class="textYellow" height="40px" width="40px" role="img" aria-label="Hint"><use xlink:href="#svgIcon-hint"></use></svg>

Tooltip

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Tooltip"><use xlink:href="#svgIcon-tooltip"></use></svg>

CVV

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="CVV"><use xlink:href="#svgIcon-cvv"></use></svg>

Code
					
<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Tooltip"><use xlink:href="#svgIcon-tooltip"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Review Icons

Reviews & Ratings

Examples

<svg class="textDarkestGray" height="18px" width="18px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-starSolid"></use></svg>

<svg class="textWhite" height="18px" width="18px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-starSolid"></use></svg>

Positive

<svg class="bkgdBlue textWhite makeCircle" height="40px" width="40px" role="img" aria-label="Positive"><use xlink:href="#svgIcon-positive"></use></svg>

Negative

<svg class="bkgdDkRed textWhite makeCircle" height="40px" width="40px" role="img" aria-label="Negative"><use xlink:href="#svgIcon-negative"></use></svg>

Code
					
<svg class="textDarkestGray" height="18px" width="18px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-starSolid"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Miscellaneous Icons

Miscellaneous

Examples

Checkmark

<svg class="textDarkestGray roundCorners8 bkgdGreen" height="40px" width="40px" role="img" aria-label="Checkmark"><use xlink:href="#svgIcon-checkMark"></use></svg>

<svg class="textDarkestGray roundCorners5 bkgdGreen" height="30px" width="30px" role="img" aria-label="Checkmark"><use xlink:href="#svgIcon-checkMark"></use></svg>

Checkmark

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Checkmark"><use xlink:href="#svgIcon-checkMark"></use></svg>

Edit

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Edit"><use xlink:href="#svgIcon-edit"></use></svg>

Positive

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Positive"><use xlink:href="#svgIcon-positive"></use></svg>

Negative

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Negative"><use xlink:href="#svgIcon-negative"></use></svg>

Pause

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Pause"><use xlink:href="#svgIcon-pause"></use></svg>

Warning

<svg height="40px" width="40px" role="img" aria-label="Warning"><use xlink:href="#svgIcon-warning"></use></svg>

Video

<svg class="textOrange" height="40px" width="40px" role="img" aria-label="Video"><use xlink:href="#svgIcon-watchVideo"></use></svg>

Rotate

<svg class="textYellow" height="40px" width="40px" role="img" aria-label="Rotate"><use xlink:href="#svgIcon-rotate"></use></svg>

RSS

<svg class="textOrange" height="40px" width="40px" role="img" aria-label="RSS"><use xlink:href="#svgIcon-rss"></use></svg>

Thumbs Up

<svg class="textDarkestGray" height="40px" width="40px" role="img" aria-label="Thumbs Up"><use xlink:href="#svgIcon-thumbsUp"></use></svg>

Code
					
<svg height="40px" width="40px" role="img" aria-label="Warning"><use xlink:href="#svgIcon-warning"></use></svg>
Notes

None at this time.

Resources

Sass File(s)None
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top