Table of Contents

What is an Icon?

About

This page is about icons. They represent symbolic image.

Example

With a font Glyph given by code point

Unicode Block Miscellaneous Symbols From U+2600 to U+26FF

See also: Icon font for special icon font.

with the Telephon

.icon-phone:before {
    content: "\260e";
    color: gray;
    font-size: 3em
}
<span class="icon-phone"></span>

With a font Glyph and a custom font

To show an icon via a custom font glyph, you would:

Example with material icon

The character <pre>&#xE145;</pre> is the icon plus: <span class="icon">&#xE145;</span>
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.woff) format('woff'),
    url(https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.ttf) format('truetype');
}

.icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

With a font Glyph given by its name (ligature)

A font can add ligatures. A ligature is a combination of characters that represents another character.

As the Material Icons font has the ligature add that points to the character &#xE145;, you can replace the code point &#xE145; of our previous example by the word add. And you will obtain the same result.

Example:

The icon <mark>add</mark> given by its name: <span class="icon">add</span>

with Data Image and SVG

URL - The data URL scheme

Within an img element

The hamburger menu icon.

img {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}
<img src="data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"/>

<!-- Could be also as a file -->
<!-- <img src="public/sound-mute.svg" style="max-height: 40px; max-width: 40px;">-->

As CSS background image

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17"><g></g><path d="M17 16v1h-17v-1h17zM12 10h2v5h1v-6h-4v6h1v-5zM7 7h2v8h1v-9h-4v9h1v-8zM2 3h2v12h1v-13h-4v13h1v-12z"  fill="rgb(62,153,239)" /></svg>');
}

.navbar-toggler-icon {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background-size: 100% 100%;
}
<span class="navbar-toggler-icon"></span>

Implementation

Icons can be represented:

HTML Performance

Icons are files that are:

Embedding them with the HTML img element means that the browser needs to perform a lot of HTTP requests.

That's why they are generally grouped into a single file:

This file is then configured to be cached into the browser after the first HTTP fetch.

Characteristics

Different design at different sizes

An icon or logo may have subtly different designs at different sizes, such as:

With a vector font (svg or font), you can’t have alternative designs for different font sizes.

Scalability

Raster images are not scalable without losing information while vector images are fully scalable.

Width and Height

<svg width="15" height="14" viewBox="0 0 15 14"/>

Tools

for symbol font

Guide

Inkscape guide: Inkscape_Guide.md

Repository

Others:

Library (code)

React:

Documentation / Reference