UI - Icon

Card Puncher Data Processing


A page about icon.

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"/>


With a font (example: unicode character)

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


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


Inkscape guide: Inkscape_Guide.md



Library (code)


Documentation / Reference

Recommended Pages
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

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 / Diagram

/ Diagram 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...
React Mapping Html Javascript
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 Mapping Html Javascript
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