What is an Icon?

Card Puncher Data Processing

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:

  • 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 <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 &#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>
  • Result:

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:

  • as vector
    • svg (interoperability problems if you want to print a PDF)
    • symbol fonts (ie as glyph representing an icon, not a character)
  • as CSS sprites (many small images into a single background image)

HTML Performance

Icons are files that are:

  • tiny (small size)
  • many (a lot by pages)
  • fixed (their number does not grow)

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:

  • CSS sprites
  • symbols fonts

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:

  • 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.

Width and Height

  • Google Cloud Platform icon: svg: 128×115, png: 256×256
  • Icon font
<svg width="15" height="14" viewBox="0 0 15 14"/>

Tools

  • http://www.grumpicon.com/ - processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.

for symbol font

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

Guide

Inkscape guide: Inkscape_Guide.md

Repository

Others:

Library (code)

React:

Documentation / Reference





Discover More
Card Puncher Data Processing
Android - Icon

Utah Teapot
Data Visualization - Visual (or Mark)

A visual is an object created from visual primitive that gets the value of its properties from the data. See also: Visual Encoding Bar (ie rectangle) Point (ie Circle or Square) Line Area...
Card Puncher Data Processing
Doodle

A doodle is a simple drawing that doesn’t take very long to create. See also
HTML - Icon (Shortcut|Favicon)

Icon The Shortcut (or Favicon) Pinned Tab icons ... The default favicon searched by the browser is: at the root of the website with an ico format and the name favicon.ico It's equivalent...
HTML Form - 1001 ways to submit a Form and handle the corresponding Event

This page talks and shows all the ways on how to submit a form and handle the submit event in javascript. How a form can be submitted ? HTML One way is to include a input element of type submit that...
Utah Teapot
Icon Font

Icon font Using web font to show graphics. It is very convenient from a development perspective. You can : change the size change the color shadow their shape Designer designs the icons....
Inkscape Icon Preview
Inkscape - Icon Creation

in Inkscape File > New from Template > icon > 16 (by default, may be 32) Preview Once you have created the icon, you can add it to a library of symbol ...
Flow Chart Google Drawing
Process - Flow Chart

A Flow chart is a diagram that represents a flow with directed graph generally composed of: (vertice (node)) connected by directed lines (edge) The flow passes a material or logical thing from...
React - FontAwesome (Icon)

Fontawesome is a library of icon (free and paid). This section is talking fontawesome integration into react. When reading the documentation, you will find prefix that references a style (ie a...
React - Material UI - Icon

This page is the svg icon functionality of material ui for react. FYI a font or class (Example with awesome) The SvgIcon component Standardized Material Design icons exported...



Share this page:
Follow us:
Task Runner