UI - Icon

> User Interface (GUI)

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

3 - Icon

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

3.2 - with Data Image and SVG

3.2.1 - 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;">-->

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

Advertising

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

5 - Library

6 - Documentation / Reference

ui/icon.txt · Last modified: 2019/09/16 17:18 by gerardnico