<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/hammy13/pen/kXdkLa" />
<style class="cp-pen-styles">body {
align-items: center;
background: #f1f1f1;
display: flex;
flex-direction: column;
font-family: "Arial", sans-serif;
justify-content: center;
}
#icons {
margin: -10px 0 0 -15px;
text-align: center;
}
svg {
background: #c03e33 /* Not supporting */;
background: -webkit-linear-gradient(90deg, #c03e33 50%, #b33a2f 50%) /* Safari 5.1 to 6.0 */;
background: -moz-linear-gradient(-90deg, #c03e33 50%, #b33a2f 50%) /* Firefox 3.6 to 15.0 */;
background: linear-gradient(180deg, #c03e33 50%, #b33a2f 50%) /* Standard */;
border-radius: 6px;
border-bottom: 4px solid #a6362c;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
margin: 0 0 15px 15px;
}
h1 {
color: #c03e33;
font-size: 1.5em;
margin: 0 0 15px 0;
}
small {
color: #a0a0a0;
font-size: 15px;
margin: -10px 0 0 0;
}
small a {
color: #c0c0c0;
text-decoration: none;
}
small a:hover {
text-decoration: underline;
}
</style></head><body>
<h1>SVG Icons</h1>
<div id="icons">
<!-- Statistics Icon !-->
<svg height="128" width="128">
<g fill="#fff">
<rect x="20" y="95" height="5" width="88" />
<rect x="26" y="60" height="30" width="22" />
<rect x="26" y="55" rx="5" ry="5" height="10" width="22" />
<rect x="53" y="45" height="45" width="22" />
<rect x="53" y="40" rx="5" ry="5" height="10" width="22" />
<rect x="80" y="30" height="60" width="22" />
<rect x="80" y="25" rx="5" ry="5" height="10" width="22" />
</g>
</svg>
<!-- Chat Icon !-->
<svg height="128" width="128">
<rect x="20" y="30" rx="10" ry="10" height="56" width="88" fill="#fff" />
<polygon points="40,85 60,85 35,106" fill="#fff" />
<circle cx="44" cy="58" r="6" fill="#c03e33" />
<circle cx="64" cy="58" r="6" fill="#c03e33" />
<circle cx="84" cy="58" r="6" fill="#c03e33" />
</svg>
<!-- Clock Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="40" fill="#fff" />
<path d="M64 40 L64 64 L78 78" fill="none" stroke="#c03e33" stroke-width="5" stroke-linecap="round" />
</svg>
<!-- Camera Icon !-->
<svg height="128" width="128">
<rect x="24" y="40" rx="5" ry="5" height="56" width="80" fill="#fff" />
<rect x="44" y="32" rx="5" ry="5" height="16" width="40" fill="#fff" />
<circle cx="64" cy="68" r="13" fill="#fff" stroke="#b33a2f" stroke-width="3" />
</svg>
<!-- Share Icon !-->
<svg height="128" width="128">
<path d="M96 32 L28 64 L96 96" fill="none" stroke="#ddd" stroke-width="8" />
<circle cx="28" cy="64" r="15" fill="#fff" />
<circle cx="96" cy="32" r="15" fill="#fff" />
<circle cx="96" cy="96" r="15" fill="#fff" />
</svg>
<!-- Community Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#ddd" stroke-width="5">
<path d="M24 86 L64 68 L32 36" />
<path d="M96 28 L64 68 L104 104" />
<line x1="64" y1="68" x2="68" y2="100" />
</g>
<g fill="#fff">
<circle cx="64" cy="68" r="15" />
<circle cx="24" cy="86" r="10" />
<circle cx="32" cy="36" r="8" />
<circle cx="96" cy="28" r="11.5" />
<circle cx="104" cy="104" r="7" />
<circle cx="68" cy="100" r="8" />
</g>
</svg>
<!-- Cell Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<ellipse cx="64" cy="64" rx="56" ry="24" transform="rotate(90 64 64)" />
<ellipse cx="64" cy="64" rx="60" ry="24" transform="rotate(35 64 64)" />
<ellipse cx="64" cy="64" rx="60" ry="24" transform="rotate(-35 64 64)" />
</g>
<g fill="#ddd" >
<circle cx="32" cy="24.5" r="8.5" />
<circle cx="76" cy="114" r="8.5" />
<circle cx="112" cy="48" r="8.5" />
</g>
<circle cx="64" cy="64" r="13" fill="#802921" />
</svg>
<!-- Move Icon !-->
<svg height="128" width="128">
<rect x="28" y="28" height="72" width="72" fill="none" stroke="#fff" stroke-width="8" stroke-dasharray="36" stroke-dashoffset="18" transform="rotate(45 64 64)" />
<g fill="none" stroke="#fff" stroke-width="6">
<line x1="12" y1="64" x2="116" y2="64" />
<line x1="64" y1="12" x2="64" y2="116" />
</g>
</svg>
<!-- Check Icon !-->
<svg height="128" width="128">
<path d="M42 64 L58 80 L90 48" fill="none" stroke="#fff" stroke-width="12" />
</svg>
<!-- "X" Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="12">
<path d="M46 46 L82 82" />
<path d="M82 46 L46 82" />
</g>
</svg>
<!-- Settings Icon !-->
<svg height="128" width="128">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="50%" style="stop-color: #c03e33" />
<stop offset="50%" style="stop-color: #b33a2f" />
</linearGradient>
</defs>
<g fill="#fff">
<circle cx="64" cy="64" r="40" />
<rect x="54" y="16" rx="2" ry="2" height="16" width="20" />
<rect x="54" y="96" rx="2" ry="2" height="16" width="20" />
<rect x="16" y="54" rx="2" ry="2" height="20" width="16" />
<rect x="96" y="54" rx="2" ry="2" height="20" width="16" />
</g>
<g fill="#fff" transform="rotate(45 64 64)">
<rect x="54" y="16" rx="2" ry="2" height="16" width="20" />
<rect x="54" y="96" rx="2" ry="2" height="16" width="20" />
<rect x="16" y="54" rx="2" ry="2" height="20" width="16" />
<rect x="96" y="54" rx="2" ry="2" height="20" width="16" />
</g>
<circle cx="64" cy="64" r="22" fill="url(#grad)" />
</svg>
<!-- Chart Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="40" fill="#fff" />
<g fill="none" stroke="#c03e33" stroke-width="4">
<path d="M28 46 L64 64 L94 36" />
<path d="M64 64.5 L104 56" />
</g>
</svg>
<!-- Notepad Icon !-->
<svg height="128" width="128">
<g fill="#fff">
<rect x="38" y="38" rx="2" ry="2" height="64" width="52" />
<rect x="42" y="32" rx="1" ry="1" height="12" width="6" />
<rect x="52" y="32" rx="1" ry="1" height="12" width="6" />
<rect x="80" y="32" rx="1" ry="1" height="12" width="6" />
<rect x="70" y="32" rx="1" ry="1" height="12" width="6" />
</g>
<g fill="none" stroke="#c03e33" stroke-width="6" stroke-linecap="round">
<line x1="48" y1="52" x2="79" y2="52" />
<line x1="48" y1="64" x2="79" y2="64" />
<line x1="48" y1="76" x2="79" y2="76" />
<line x1="48" y1="88" x2="79" y2="88" />
</g>
</svg>
<!-- 3D Cube Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#ddd" stroke-width="5">
<path d="M64 64 L36 48 L64 32 L92 48 L64 64 L64 100" />
<path d="M64 100 L36 84 L36 48" />
<path d="M64 100 L92 84 L92 48" />
</g>
<g fill="#fff">
<circle cx="64" cy="64" r="7" />
<circle cx="36" cy="48" r="7" />
<circle cx="92" cy="48" r="7" />
<circle cx="64" cy="32" r="7" />
<circle cx="64" cy="100" r="7" />
<circle cx="36" cy="84" r="7" />
<circle cx="92" cy="84" r="7" />
</g>
</svg>
<!-- Trending Icon !-->
<svg height="128" width="128">
<polyline points="16,96 60,56 88,80 104,40" fill="none" stroke="#fff" stroke-width="10" />
<polygon points="48,64 80,64 64,48" fill="#fff" transform="rotate(20 150 164)" />
</svg>
<!-- Play Icon !-->
<svg height="128" width="128">
<polygon points="90,64 42,32 42,96" fill="#fff"/>
</svg>
<!-- Pause Icon !-->
<svg height="128" width="128">
<g fill="#fff">
<rect x="38" y="32" height="64" width="20" />
<rect x="68" y="32" height="64" width="20" />
</g>
</svg>
<!-- Prohibition Icon !-->
<svg height="128" width="128">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="50%" style="stop-color: #c03e33" />
<stop offset="50%" style="stop-color: #b33a2f" />
</linearGradient>
</defs>
<circle cx="64" cy="64" r="40" fill="#fff" />
<circle cx="64" cy="64" r="30" fill="url(#grad)" />
<line x1="36" y1="36" x2="92" y2="92" fill="none" stroke="#fff" stroke-width="10" />
</svg>
<!-- Pokeball Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="40" fill="#fff" />
<line x1="23" y1="64" x2="105" y2="64" fill="none" stroke="#c73c3c" stroke-width="4" />
<circle cx="64" cy="64" r="12" fill="#fff" stroke="#c73c3c" stroke-width="4" />
</svg>
<!-- Download Icon !-->
<svg height="128" width="128">
<g fill="#fff">
<rect x="32" y="96" height="10" width="64" />
<rect x="54" y="20" height="48" width="20" />
<polygon points="64,88 40,64 88,64" />
</g>
</svg>
<!-- Web Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<circle cx="64" cy="64" r="40" />
<line x1="24" y1="64" x2="104" y2="64" />
<line x1="64" y1="24" x2="64" y2="104" />
<ellipse cx="64" cy="64" rx="20" ry="40" />
<path d="M34 90 C44 74 84 74 94 90" />
<path d="M34 38 C44 54 84 54 94 38" />
</g>
</svg>
<!-- Controls Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#ddd" stroke-width="7" stroke-linecap="round">
<line x1="32" y1="24" x2="32" y2="104" />
<line x1="64" y1="24" x2="64" y2="104" />
<line x1="96" y1="24" x2="96" y2="104" />
</g>
<g fill="#fff">
<circle cx="64" cy="48" r="10" />
<circle cx="32" cy="72" r="10" />
<circle cx="96" cy="86" r="10" />
</g>
</svg>
<!-- Bookmark Icon !-->
<svg height="128" width="128">
<path d="M44 96 L44 32 L84 32 L84 96 L64 76 Z" fill="#fff" />
</svg>
<!-- Menu Icon !-->
<svg height="128" width="128">
<g fill="#fff">
<rect x="20" y="20" rx="2" ry="2" height="24" width="24" />
<rect x="52" y="20" rx="2" ry="2" height="24" width="24" />
<rect x="84" y="20" rx="2" ry="2" height="24" width="24" />
<rect x="20" y="52" rx="2" ry="2" height="24" width="24" />
<rect x="52" y="52" rx="2" ry="2" height="24" width="24" />
<rect x="84" y="52" rx="2" ry="2" height="24" width="24" />
<rect x="20" y="84" rx="2" ry="2" height="24" width="24" />
<rect x="52" y="84" rx="2" ry="2" height="24" width="24" />
<rect x="84" y="84" rx="2" ry="2" height="24" width="24" />
</g>
</svg>
<!-- Navigation Icon !-->
<svg height="128" width="128">
<path d="M44 96 L64 32 L84 96 L64 86 Z" fill="#fff" stroke="#fff" stroke-width="2" />
</svg>
<!-- Sun Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="21" fill="none" stroke="#fff" stroke-width="6" />
<g stroke="#fff" stroke-width="6" stroke-linecap="round">
<line x1="64" y1="32" x2="64" y2="16" />
<line x1="64" y1="96" x2="64" y2="112" />
<line x1="32" y1="64" x2="16" y2="64" />
<line x1="96" y1="64" x2="112" y2="64" />
</g>
<g stroke="#fff" stroke-width="6" stroke-linecap="round" transform="rotate(45 64 64)">
<line x1="64" y1="32" x2="64" y2="16" />
<line x1="64" y1="96" x2="64" y2="112" />
<line x1="32" y1="64" x2="16" y2="64" />
<line x1="96" y1="64" x2="112" y2="64" />
</g>
</svg>
<!-- Report Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="36" fill="none" stroke="#fff" stroke-width="6" />
<g stroke="#fff" stroke-width="6.5" stroke-linecap="round">
<line x1="64" y1="40" x2="64" y2="76" />
<line x1="64" y1="88" x2="64" y2="88" />
</g>
</svg>
<!-- Profile Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round">
<circle cx="64" cy="48" r="22" />
<path d="M32 102 C40 62 88 62 96 102" />
</g>
</svg>
<!-- Picture Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<rect x="24" y="32" rx="2" ry="2" height="64" width="80" />
<path d="M24 84 L48 68 L64 80 L94 52 L104 60" />
</g>
<circle cx="44" cy="50" r="8" fill="none" stroke="#fff" stroke-width="3" />
</svg>
<!-- Battery Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<rect x="36" y="28" rx="2" ry="2" height="80" width="56" />
</g>
<g fill="#fff" stroke="#fff" stroke-width="6">
<rect x="52" y="22" rx="2" ry="2" height="6" width="24" />
<rect x="46" y="38" height="60" width="36" />
</g>
</svg>
<!-- Map Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<path d="M24 104 L44 88 L64 104 L84 88 L104 104 L104 40 L84 24 L64 40 L44 24 L24 40 Z" />
<line x1="44" y1="24" x2="44" y2="88" />
<line x1="64" y1="40" x2="64" y2="104" />
<line x1="84" y1="24" x2="84" y2="88" />
</g>
</svg>
<!-- Sight Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round">
<circle cx="64" cy="64" r="36" />
<line x1="64" y1="28" x2="64" y2="38" />
<line x1="64" y1="100" x2="64" y2="90" />
<line x1="28" y1="64" x2="38" y2="64" />
<line x1="100" y1="64" x2="90" y2="64" />
</g>
</svg>
<!-- Power Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round">
<circle cx="64" cy="64" r="36" stroke-dasharray="180" transform="rotate(-52 64 64)" />
<line x1="64" y1="64" x2="64" y2="20" />
</g>
</svg>
<!-- Mouse Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round">
<rect x="40" y="28" rx="18" height="72" width="48" />
<line x1="64" y1="40" x2="64" y2="52" />
</g>
</svg>
<!-- Bowling Ball Icon !-->
<svg height="128" width="128">
<circle cx="64" cy="64" r="36" fill="none" stroke="#fff" stroke-width="6" />
<g fill="#fff">
<circle cx="60" cy="48" r="6" />
<circle cx="78" cy="48" r="6" />
<circle cx="72" cy="64" r="6" />
</g>
</svg>
<!-- Tennis Ball Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6">
<circle cx="64" cy="64" r="36" />
<path d="M36 40 C56 50 56 78 36 88" />
<path d="M92 40 C72 50 72 78 92 88" />
</g>
</svg>
<!-- Clock Icon !-->
<svg height="128" width="128">
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round">
<circle cx="64" cy="64" r="36" />
<path d="M64 44 L64 64 L76 64" />
</g>
</svg>
</div>
<small>Created by <a href="https://codepen.io/JCee" target="_blank">Jacob Coin</a></small>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >//These icons are hand-written. No SVG-editing programs were used.
//# sourceURL=pen.js
</script>
</body></html>
