About
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"/>
Icon
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
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>
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.
Guide
Repository
- https://primer.style/octicons/ - Github Primer Design Icon
Others:
- https://simpleicons.org/ - Brand icon (Twitter, …)
Library (code)
React: