Icon Test Suite

This page uses a number of different methods to embed icons within the page. If you see an icon (or two) below each page, success! View source to see what each method is actually doing. Images are courtesy of Freepik.

Font Icons:

Font ASCII

Font PUA

Font Ligatures
P R
 
pig rabbit

Distinct SVG Icons:

These implementations can not be altered via JS or CSS since the svg dom is not available in the document dom. All use the <img/> tag.

SVG as Image

SVG Image Spritesheet

Referenced by viewBox

SVG Image Spritesheet

Referenced by name

SVG Image Stack

Stack based on groups

SVG Image Symbol Stack

Stack based on symbols

CSS Background SVG Icons:

CSS as File Url

CSS as File Url

Spritesheet referenced by viewBox

CSS as File Url

Spritesheet referenced by name

CSS as File Url

Stack based on groups

CSS as File Url

Stack based on symbols

CSS as Data URI

CSS as Data URI

Spritesheet referenced by viewBox

CSS as Data URI

Spritesheet referenced by name

CSS as Data URI

Stack based on groups

CSS as Data URI

Stack based on symbols

Interactive SVG Icons:

These implementations can be altered via JS or CSS. Except the inline version, all versions use the shadow dom, which has limited modification possibilities

SVG Inline

SVG Internal Xlink

SVG External Xlink

Spritesheet referenced by viewBox

SVG External Xlink

Spritesheet referenced by name

SVG External Xlink

Stack based on groups

SVG External Xlink

Stack based on symbols

SVG Icons responsive

These icons are made responsive simply by using width: 100%; height: auto;. This might fail in several browsers.

SVG as img tag

SVG Inline

SVG Internal Xlink

SVG External Xlink

Stack based on groups

SVG External Xlink

Stack based on symbols

SVG Icons with responsive fix:

Since some browsers display svg's always with 150px height, we may use the padding hack to fix this.

SVG as img tag

SVG Inline

SVG Internal Xlink

SVG External Xlink

Stack based on groups

SVG External Xlink

Stack based on symbols