What is an Icon?

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:

• use a character referenced by its code point (Code point of icons/symbol and new characters are in the Private_Use_Areas)
• and apply the font

Example with material icon

• The character 

The character <pre>&#xE145;</pre> is the icon plus: <span class="icon">&#xE145;</span>

• The font definition and the icon class

@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';
}

• The result would show you a + icon

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 , you can replace the code point  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>

• Result:

Different design at different sizes

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

• changing its line thicknesses
• dropping some details at small sizes.

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.

for symbol font

• https://fontforge.org/
• Icomoon lets you upload your SVG files, map them to unicode characters, and export a font for use online.