svg-icons
Version:
2,026 lines • 88.7 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Gulp SVG Symbols test page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: #ecf4f8;
text-align: center;
}
html, body {
margin: 0; padding: 0;
}
h1 {
margin: 0 0 1em; padding: 1em;
background: white;
}
main {
display: flex;
flex-wrap: wrap;
}
main::after {
content: '';
flex-grow: 100;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.icon,
.icon-wrapper {
background: white;
margin: .5em;
padding: 1em;
border-radius: .5em;
}
.icon {
display: inline-block;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 0;
min-width: 8em;
}
.icon-wrapper {
background-color: #fafafa;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size:30px 30px;
background-position:0 0, 15px 15px;
margin: auto;
}
.icon-action {
margin: 1em -1em 0;
border-top: 1px solid #eee;
display: flex;
}
.icon-action > * {
flex-grow: 1;
}
button {
font: inherit;
background: none;
border: 0;
outline: 0;
}
button,
label {
padding: 1em .5em;
flex-basis: 50%;
cursor: pointer;
}
button:hover,
label:hover {
color: mediumVioletRed;
}
label {
border-left: 1px solid #eee;
}
input[type=checkbox] {
display: none;
}
/* can't display none: copy won't work */
pre {
text-align: left;
position: absolute;
opacity: 0;
z-index: 2;
padding: 1em;
pointer-events: none;
border-top: 1px solid #eee;
margin: 0 -1em;
width: 0;
}
input:checked ~ .icon-action label {
background: #eee;
}
input:checked ~ pre {
position: static;
pointer-events: auto;
opacity: 1;
width: 100%;
}
</style>
<style type="text/css">
.add-circle-outline {
width: 24px;
height: 24px;
}
.add-circle {
width: 24px;
height: 24px;
}
.add {
width: 24px;
height: 24px;
}
.apps {
width: 24px;
height: 24px;
}
.arrow-back {
width: 24px;
height: 24px;
}
.arrow-down {
width: 24px;
height: 24px;
}
.arrow-drop-down {
width: 24px;
height: 24px;
}
.arrow-drop-up {
width: 24px;
height: 24px;
}
.arrow-forward {
width: 24px;
height: 24px;
}
.arrow-up {
width: 24px;
height: 24px;
}
.book {
width: 24px;
height: 24px;
}
.bookmark-outline-plus {
width: 24px;
height: 24px;
}
.bookmark-remove {
width: 24px;
height: 24px;
}
.check-box-outline-blank {
width: 24px;
height: 24px;
}
.check-box {
width: 24px;
height: 24px;
}
.check {
width: 24px;
height: 24px;
}
.chevron-left {
width: 24px;
height: 24px;
}
.chevron-right {
width: 24px;
height: 24px;
}
.close {
width: 24px;
height: 24px;
}
.delete {
width: 24px;
height: 24px;
}
.do-not-disturb {
width: 24px;
height: 24px;
}
.done {
width: 24px;
height: 24px;
}
.edit {
width: 24px;
height: 24px;
}
.email {
width: 24px;
height: 24px;
}
.error {
width: 24px;
height: 24px;
}
.file-image {
width: 24px;
height: 24px;
}
.file {
width: 24px;
height: 24px;
}
.grid-on {
width: 24px;
height: 24px;
}
.help {
width: 24px;
height: 24px;
}
.image {
width: 24px;
height: 24px;
}
.info-outline {
width: 24px;
height: 24px;
}
.info {
width: 24px;
height: 24px;
}
.list {
width: 24px;
height: 24px;
}
.menu {
width: 24px;
height: 24px;
}
.more-horiz {
width: 24px;
height: 24px;
}
.more-vert {
width: 24px;
height: 24px;
}
.notifications {
width: 24px;
height: 24px;
}
.pause {
width: 24px;
height: 24px;
}
.people {
width: 24px;
height: 24px;
}
.platform-3ds {
width: 24px;
height: 24px;
}
.platform-linux {
width: 24px;
height: 24px;
}
.platform-mac {
width: 24px;
height: 24px;
}
.platform-nintendo {
width: 48px;
height: 24px;
}
.platform-pc {
width: 24px;
height: 24px;
}
.platform-ps {
width: 24px;
height: 24px;
}
.platform-sega {
width: 24px;
height: 24px;
}
.platform-xbox {
width: 24px;
height: 24px;
}
.play-arrow {
width: 24px;
height: 24px;
}
.profile {
width: 24px;
height: 24px;
}
.remove-circle-outline {
width: 24px;
height: 24px;
}
.remove-circle {
width: 24px;
height: 24px;
}
.remove {
width: 24px;
height: 24px;
}
.search {
width: 24px;
height: 24px;
}
.server {
width: 24px;
height: 24px;
}
.settings {
width: 24px;
height: 24px;
}
.share {
width: 24px;
height: 24px;
}
.star-outline {
width: 24px;
height: 24px;
}
.star {
width: 24px;
height: 24px;
}
.sync {
width: 24px;
height: 24px;
}
.thumb-down {
width: 24px;
height: 24px;
}
.thumb-up {
width: 24px;
height: 24px;
}
.twiiter {
width: 24px;
height: 24px;
}
.view-headline {
width: 24px;
height: 24px;
}
.view-list {
width: 24px;
height: 24px;
}
.view-module {
width: 24px;
height: 24px;
}
.warning-stop {
width: 24px;
height: 24px;
}
.warning {
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="add-circle-outline" viewBox="0 0 24 24">
<title>add-circle-outline icon</title>
<path fill="#404040" d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</symbol>
<symbol id="add-circle" viewBox="0 0 24 24">
<title>add-circle icon</title>
<path fill="#404040" d="M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</symbol>
<symbol id="add" viewBox="0 0 24 24">
<title>add icon</title>
<path fill="#404040" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="apps" viewBox="0 0 24 24">
<title>apps icon</title>
<path fill="#404040" d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
</symbol>
<symbol id="arrow-back" viewBox="0 0 24 24">
<title>arrow-back icon</title>
<path fill="#404040" d="M20 11H7.83l5.585-5.585L12 4l-8 8 8 8 1.415-1.415L7.83 13H20v-2z"/>
</symbol>
<symbol id="arrow-down" viewBox="-287 189 24 24">
<title>arrow-down icon</title>
<style>.st0{fill:#404040;}</style><path class="st0" d="M-276 193v12.2l-5.6-5.6-1.4 1.4 8 8 8-8-1.4-1.4-5.6 5.6V193h-2z"/>
</symbol>
<symbol id="arrow-drop-down" viewBox="0 0 24 24">
<title>arrow-drop-down icon</title>
<path fill="#404040" d="M7 10l5 5 5-5z"/>
</symbol>
<symbol id="arrow-drop-up" viewBox="0 0 24 24">
<title>arrow-drop-up icon</title>
<path fill="#404040" d="M7 14l5-5 5 5z"/>
</symbol>
<symbol id="arrow-forward" viewBox="0 0 24 24">
<title>arrow-forward icon</title>
<path fill="#404040" d="M12 4l-1.415 1.415L16.17 11H4v2h12.17l-5.585 5.585L12 20l8-8z"/>
</symbol>
<symbol id="arrow-up" viewBox="-287 189 24 24">
<title>arrow-up icon</title>
<style>.st0{fill:#404040;}</style><path class="st0" d="M-274 209v-12.2l5.6 5.6 1.4-1.4-8-8-8 8 1.4 1.4 5.6-5.6V209h2z"/>
</symbol>
<symbol id="book" viewBox="0 0 24 24">
<title>book icon</title>
<path fill="#404040" d="M18 2H6c-1.105 0-2 .895-2 2v16c0 1.105.895 2 2 2h12c1.105 0 2-.895 2-2V4c0-1.105-.895-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
</symbol>
<symbol id="bookmark-outline-plus" viewBox="0 0 24 24">
<title>bookmark-outline-plus icon</title>
<path d="M17 18V5H7v13l5-2.18L17 18m0-15a2 2 0 0 1 2 2v16l-7-3-7 3V5c0-1.11.9-2 2-2h10m-6 4h2v2h2v2h-2v2h-2v-2H9V9h2V7z"/>
</symbol>
<symbol id="bookmark-remove" viewBox="0 0 24 24">
<title>bookmark-remove icon</title>
<path d="M17 3a2 2 0 0 1 2 2v16l-7-3-7 3V5c0-1.11.9-2 2-2h10M8.17 8.58L10.59 11l-2.42 2.41 1.42 1.42L12 12.41l2.41 2.42 1.42-1.42L13.41 11l2.42-2.42-1.42-1.41L12 9.58 9.59 7.17 8.17 8.58z"/>
</symbol>
<symbol id="check-box-outline-blank" viewBox="0 0 24 24">
<title>check-box-outline-blank icon</title>
<path fill="#404040" d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</symbol>
<symbol id="check-box" viewBox="0 0 24 24">
<title>check-box icon</title>
<path fill="#404040" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</symbol>
<symbol id="check" viewBox="0 0 24 24">
<title>check icon</title>
<path fill="#404040" d="M9 16.17L4.83 12l-1.415 1.415L9 19 21 7l-1.415-1.415z"/>
</symbol>
<symbol id="chevron-left" viewBox="0 0 24 24">
<title>chevron-left icon</title>
<path fill="#404040" d="M15.415 7.415L14 6l-6 6 6 6 1.415-1.415L10.83 12z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 24 24">
<title>chevron-right icon</title>
<path fill="#404040" d="M10 6L8.585 7.415 13.17 12l-4.585 4.585L10 18l6-6z"/>
</symbol>
<symbol id="close" viewBox="0 0 24 24">
<title>close icon</title>
<path fill="#404040" d="M19 6.415L17.585 5 12 10.585 6.415 5 5 6.415 10.585 12 5 17.585 6.415 19 12 13.415 17.585 19 19 17.585 13.415 12z"/>
</symbol>
<symbol id="delete" viewBox="0 0 24 24">
<title>delete icon</title>
<path fill="#404040" d="M6 19c0 1.105.895 2 2 2h8c1.105 0 2-.895 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
</symbol>
<symbol id="do-not-disturb" viewBox="0 0 24 24">
<title>do-not-disturb icon</title>
<path fill="#404040" d="M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.635-3.545 1.685-4.9L16.9 18.315C15.545 19.365 13.85 20 12 20zm6.315-3.1L7.1 5.685C8.455 4.635 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.635 3.545-1.685 4.9z"/>
</symbol>
<symbol id="done" viewBox="0 0 24 24">
<title>done icon</title>
<path fill="#404040" d="M9 16.17L4.83 12l-1.415 1.415L9 19 21 7l-1.415-1.415z"/>
</symbol>
<symbol id="edit" viewBox="0 0 24 24">
<title>edit icon</title>
<path fill="#404040" d="M3 17.25V21h3.75L17.815 9.935l-3.75-3.75L3 17.25zM20.705 7.045c.39-.39.39-1.025 0-1.415L18.37 3.295c-.39-.39-1.025-.39-1.415 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</symbol>
<symbol id="email" viewBox="0 0 24 24">
<title>email icon</title>
<path fill="#404040" d="M20 4H4c-1.105 0-1.99.895-1.99 2L2 18c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</symbol>
<symbol id="error" viewBox="0 0 24 24">
<title>error icon</title>
<path fill="#404040" d="M12 2C6.48 2 2 6.475 2 12s4.48 10 10 10 10-4.475 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</symbol>
<symbol id="file-image" viewBox="0 0 24 24">
<title>file-image icon</title>
<path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2m0 18h12v-8l-4 4-2-2-6 6M8 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#404040"/>
</symbol>
<symbol id="file" viewBox="0 0 24 24">
<title>file icon</title>
<path fill="#404040" d="M14 2H6c-1.105 0-1.99.895-1.99 2L4 20c0 1.105.885 2 1.99 2H18c1.105 0 2-.895 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
</symbol>
<symbol id="grid-on" viewBox="0 0 24 24">
<title>grid-on icon</title>
<path fill="#404040" d="M20 2H4c-1.105 0-2 .895-2 2v16c0 1.105.895 2 2 2h16c1.105 0 2-.895 2-2V4c0-1.105-.895-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/>
</symbol>
<symbol id="help" viewBox="0 0 24 24">
<title>help icon</title>
<path fill="#404040" d="M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm1 17h-2v-2h2v2zm2.065-7.745l-.895.92C13.45 12.895 13 13.5 13 15h-2v-.5c0-1.105.45-2.105 1.17-2.83l1.245-1.26c.36-.36.585-.86.585-1.41 0-1.105-.895-2-2-2s-2 .895-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.355 1.675-.935 2.255z"/>
</symbol>
<symbol id="image" viewBox="0 0 24 24">
<title>image icon</title>
<path d="M20 5c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h16M5 16h14l-4.5-6-3.5 4.5-2.5-3L5 16z"/>
</symbol>
<symbol id="info-outline" viewBox="0 0 24 24">
<title>info-outline icon</title>
<path fill="#404040" d="M11 17h2v-6h-2v6zm1-15C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
</symbol>
<symbol id="info" viewBox="0 0 24 24">
<title>info icon</title>
<path fill="#404040" d="M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</symbol>
<symbol id="list" viewBox="0 0 24 24">
<title>list icon</title>
<path fill="#404040" d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
</symbol>
<symbol id="menu" viewBox="0 0 24 24">
<title>menu icon</title>
<path fill="#404040" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</symbol>
<symbol id="more-horiz" viewBox="0 0 24 24">
<title>more-horiz icon</title>
<path fill="#404040" d="M6 10c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm12 0c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-6 0c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"/>
</symbol>
<symbol id="more-vert" viewBox="0 0 24 24">
<title>more-vert icon</title>
<path fill="#404040" d="M12 8c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 2c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm0 6c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"/>
</symbol>
<symbol id="notifications" viewBox="0 0 24 24">
<title>notifications icon</title>
<path fill="#404040" d="M11.5 22c1.105 0 2-.895 2-2h-4c0 1.105.895 2 2 2zm6.5-6v-5.5c0-3.075-2.135-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.865.68-5 3.245-5 6.32V16l-2 2v1h17v-1l-2-2z"/>
</symbol>
<symbol id="pause" viewBox="0 0 24 24">
<title>pause icon</title>
<path fill="#404040" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</symbol>
<symbol id="people" viewBox="0 0 24 24">
<title>people icon</title>
<path fill="#404040" d="M16 11c1.655 0 2.99-1.345 2.99-3S17.655 5 16 5c-1.655 0-3 1.345-3 3s1.345 3 3 3zm-8 0c1.655 0 2.99-1.345 2.99-3S9.655 5 8 5C6.345 5 5 6.345 5 8s1.345 3 3 3zm0 2c-2.335 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.665-3.5-7-3.5zm8 0c-.29 0-.615.02-.965.055C16.195 13.89 17 15.015 17 16.5V19h6v-2.5c0-2.33-4.665-3.5-7-3.5z"/>
</symbol>
<symbol id="platform-3ds" viewBox="0 0 24 24">
<title>platform-3ds icon</title>
<path d="M8.9 12V9.5c0-.2 0-.2.2-.2h3.5c.7 0 1.3.1 2 .3.6.2 1.1.6 1.4 1.2.2.3.3.7.3 1.1 0 .3 0 .6-.1.9-.1.4-.4.8-.7 1.1-.6.5-1.3.7-2.1.8-.6.1-1.2.1-1.8.1H9.1c-.2 0-.2 0-.2-.2V12zm1.9 0v1.8c0 .2 0 .2.2.2h1.4c.3 0 .7-.1 1-.2.3-.1.5-.3.7-.5.4-.5.5-1 .4-1.5-.1-.6-.5-1.1-1-1.3-.5-.2-.9-.3-1.5-.3h-1c-.1 0-.1 0-.1.1v.1c-.1.4-.1 1-.1 1.6zM6.9 11.7c.4.1.7.2 1 .5.2.1.3.3.4.5.2.4.1.8-.2 1.2-.3.3-.6.4-.9.6-.5.2-1 .3-1.5.3H4.1c-.6 0-1.2-.1-1.8-.2-.2 0-.2 0-.2-.2v-.6c0-.2 0-.2.2-.1s.5.1.7.2c.4 0 .8.1 1.3.1.4 0 .7 0 1.1-.1.3-.1.6-.2.8-.3.3-.2.4-.7 0-.9l-.6-.3c-.3-.1-.7-.1-1-.1H3.3c-.2 0-.2 0-.2-.2v-.4c0-.2 0-.2.2-.2h1c.4 0 .8-.1 1.2-.2.2 0 .3-.1.5-.2 0-.1.1-.1.1-.1.2-.3.1-.5-.2-.7-.2-.1-.3-.2-.5-.2-.4-.1-.7-.2-1.1-.1-.6 0-1.2.1-1.8.3h-.2c-.1 0-.2 0-.2-.1v-.6c0-.1 0-.1.1-.2.1 0 .3-.1.5-.1.3 0 .6-.1.9-.1h1.5c.7 0 1.3.1 2 .3.3.1.6.2.8.4.3.2.4.7.2 1-.1.3-.3.4-.6.6-.2.1-.4.2-.6.2zM18.7 14.8c-.7 0-1.4 0-2.1-.2-.2 0-.2 0-.2-.2v-.6c0-.1 0-.2.2-.1.5.2 1.1.2 1.7.3h.7c.3 0 .5-.1.8-.2.1-.1.2-.2.3-.4 0-.2 0-.4-.2-.5l-.6-.3c-.5-.2-.9-.4-1.4-.5-.4-.1-.7-.3-1-.5-.2-.1-.3-.3-.4-.5-.2-.4-.1-.9.3-1.2.4-.3.9-.5 1.5-.6.3 0 .5 0 .8-.1h1.2c.3 0 .6.1.9.1.1 0 .1 0 .1.2v.6c0 .1 0 .2-.2.1-.4-.1-.7-.2-1.1-.2-.4-.1-.9-.1-1.3 0-.1 0-.3.1-.4.2-.2.1-.2.4-.1.6.2.2.4.3.6.3.6.2 1.1.4 1.7.6.3.1.7.3.9.5.2.2.4.3.5.6.2.6-.1 1.1-.6 1.4-.4.2-.8.3-1.2.4-.2 0-.3 0-.5.1-.3.1-.6.1-.9.1z"/>
</symbol>
<symbol id="platform-linux" viewBox="0 0 24 24">
<title>platform-linux icon</title>
<path d="M11.6 2h1.2c1.2.3 1.9 1 2.2 2.2.2.6.3 1.2.3 1.9 0 1.3.3 2.6 1.2 3.6.6.8 1.1 1.7 1.6 2.5.6 1 .9 2.2.6 3.4-.1.3 0 .5.1.8.2.2.2.5.2.8 0 .5.3.8.7 1.1.2.1.5.2.6.5v.5c-.2.3-.5.5-.8.7-.7.4-1.4.7-2.1 1.2-.4.3-.8.7-1.3.9h-.9c-.3-.1-.5-.3-.7-.5-.1-.2-.3-.3-.6-.4-1.3-.2-2.6-.2-3.8.1-.2 0-.3.1-.4.2-.2.4-.7.5-1.2.4-.3-.1-.6-.1-.9-.2-.9-.3-1.9-.6-2.9-.8-.5-.1-.9-.2-1.2-.6v-.5c.2-.5.3-1 .2-1.5-.2-.8 0-1 .8-1.2.5-.1.9-.3 1.2-.7.3-.4.6-.8.5-1.3 0-.2.1-.4.2-.6.1-.3.3-.7.4-1 .4-1.4 1.1-2.7 2.1-3.8.4-.5.6-1 .6-1.7 0-1.1-.2-2.2-.1-3.3.1-1.3.6-2 1.9-2.4 0-.2.1-.3.3-.3zM9.9 8.4c-.1.6-.2 1.1-.5 1.5-.4.5-.6 1.1-.8 1.7-.1.4-.3.9-.5 1.3-.2.5-.4.9-.5 1.4-.2.9.1 1.6.8 2.2.5.3.9.7 1.3 1.1.4.4.4.7 0 1.1-.1.1-.1.2 0 .3.3.4.7.8 1.3.7h.6c1.2 0 2.2-.4 3.1-1.3.2-.2.3-.3.3-.6 0-.5.1-1 .1-1.5 0-.3.2-.6.5-.6s.4-.1.4-.4c.1-.8.1-1.6-.1-2.4-.5-1.6-1.2-3.1-1.9-4.6-.2-.3-.3-.4-.6-.2-.5.3-1 .6-1.6.8-.4.2-.7.2-1-.1-.4 0-.7-.2-.9-.4zM8.6 21.2c.2 0 .3 0 .5-.2.5-.4.6-.9.1-1.5-.6-.8-1.1-1.6-1.6-2.4-.1-.2-.3-.4-.4-.6-.4-.5-.7-.4-1 .1-.2.4-.5.7-1 .7-.1 0-.3.1-.4.1-.4.1-.5.3-.4.6.1.4 0 .8-.1 1.3s-.1.7.5.7c1 .2 2 .4 2.9.8.2.3.6.4.9.4zm6.8-.9c0 .3.1.7.4.9.4.2.7 0 1-.2.1-.1.3-.2.4-.3.3-.3.7-.6 1.1-.8.4-.2.9-.5 1.3-.7.3-.2.3-.3 0-.6-.1 0-.1-.1-.2-.1-.4-.2-.7-.6-.7-1 0-.1 0-.3-.1-.4 0-.2-.1-.2-.2-.1l-.2.2c-.4.4-.9.6-1.5.5-.5-.1-.7-.5-.7-1 0-.1 0-.1-.1-.1s-.1.1-.1.1v.6c.1.5 0 1-.1 1.5-.2.5-.3.9-.3 1.5zM11.5 6.7c-.4 0-.6.2-.8.4-.7.6-.7.7.1 1.2.2.2.4.3.8.2.6-.2 1-.6 1.6-.9.2-.1.2-.3 0-.4-.7-.2-1.2-.3-1.7-.5zm1.7 0c.6-.3.7-1.4.1-1.9-.3-.3-.8-.2-1.1.1-.2.3-.4.7-.3 1.1 0 .1.1.3.2.3.2 0 .1-.2.1-.3 0-.3.2-.6.5-.6s.5.3.5.7c.1.2.1.4 0 .6zm-3 .1c-.1-.1-.2-.2-.3-.4-.1-.3-.1-.5 0-.8.1-.1.2-.2.4-.1.3.1.3.3.4.6 0 .1 0 .2.1.2s.2-.1.2-.2c0-.4 0-.7-.3-1-.3-.3-.6-.3-.8 0-.3.4-.4 1.2 0 1.6 0 .1.1.2.3.1z" fill="#404040"/>
</symbol>
<symbol id="platform-mac" viewBox="0 0 24 24">
<title>platform-mac icon</title>
<path d="M20.1 17.6c-.3.7-.7 1.3-1.1 1.9-.6.8-1 1.4-1.4 1.7-.6.5-1.1.8-1.8.8-.5 0-1-.1-1.6-.4-.6-.3-1.2-.4-1.8-.4-.6 0-1.2.1-1.8.4-.7.2-1.2.4-1.6.4-.6 0-1.2-.2-1.8-.8-.4-.3-.9-.9-1.4-1.7-.6-.9-1.1-1.9-1.5-3-.4-1.2-.6-2.5-.6-3.6 0-1.3.3-2.5.9-3.5.5-.8 1.1-1.4 1.8-1.8.6-.6 1.4-.8 2.3-.8.5 0 1.1.1 1.9.4.8.3 1.3.4 1.5.4.2 0 .7-.2 1.7-.5.9-.3 1.7-.5 2.3-.4 1.7.1 2.9.8 3.8 2-1.5.9-2.2 2.2-2.2 3.8 0 1.3.5 2.3 1.4 3.2.4.4.9.7 1.4.9-.2.4-.3.7-.4 1zM16.2 2.4c0 1-.4 1.9-1.1 2.8-.9 1-1.9 1.6-3.1 1.5v-.4c0-1 .4-2 1.2-2.8.4-.4.8-.8 1.4-1.1.5-.2 1.1-.4 1.6-.4v.4z" fill="#404040"/>
</symbol>
<symbol id="platform-nintendo" viewBox="0 0 48 24">
<title>platform-nintendo icon</title>
<path d="M40.7 17.4H7.3c-.3 0-.6-.1-.8-.1-2.1-.5-3.6-1.7-4.2-3.8-.1-.3-.1-.7-.2-1.1v-.8-.2c.3-2.3 1.8-4 4-4.6.4-.1.8-.1 1.2-.2h33.5c.3 0 .6.1.8.1 2.2.5 3.7 1.8 4.3 4 .1.3.1.6.2.9v1c-.3 2.3-1.8 4-4 4.6-.6.1-1 .1-1.4.2zM24 16.1h16.2c.4 0 .9 0 1.3-.1 1.5-.4 2.5-1.2 3-2.7.5-1.5.2-2.8-.8-4-.9-1-2.1-1.4-3.4-1.4H7.8c-.5 0-.9 0-1.4.2-1.5.4-2.6 1.4-2.9 3-.3 1.6 0 3 1.3 4.1.9.7 1.9 1 3 1 5.4-.1 10.8-.1 16.2-.1z"/><path d="M7.9 11v3.3c0 .2 0 .2-.2.2H6.5c-.1 0-.2 0-.2-.2V9.5c0-.1 0-.2.2-.2h1.3c.2.1.2.2.3.3.6 1 1.3 2.1 1.9 3.1 0 .1.1.1.1.2.1-.1 0-.2 0-.2v-3c0-.2.1-.3.2-.2h1.1c.1 0 .2 0 .2.2v4.8c0 .1-.1.2-.2.2h-1.2c-.1 0-.2-.1-.3-.2-.6-1-1.3-2.1-1.9-3.1.1-.2.1-.3-.1-.4zM36.8 12v2.3c0 .2 0 .2-.2.2h-1.1c-.1 0-.2 0-.2-.1s-.1 0-.2 0c-.7.3-1.3.3-1.9-.2-.7-.5-.9-1.5-.5-2.3.5-.8 1.4-1.1 2.3-.8.3.1.3.1.3-.2V9.6c0-.2.1-.2.2-.2h1.1c.2 0 .2.1.2.2-.1.8 0 1.6 0 2.4zm-1.5.8v-.6c0-.4-.2-.6-.6-.6-.4 0-.6.2-.6.6v1.3c0 .4.3.6.6.6.4 0 .6-.2.6-.6v-.7zM16.5 11.5c.3-.3.6-.4 1-.5 1.1-.2 2 .6 2 1.7v1.6c0 .2-.1.2-.2.2h-1.1c-.2 0-.2-.1-.2-.2v-1.9c0-.3-.1-.5-.4-.7-.3-.1-.6-.1-.8.1-.2.1-.2.3-.2.5v2c0 .2 0 .2-.2.2h-1.1c-.1 0-.2 0-.2-.2v-3c0-.1.1-.2.2-.2h1c.1 0 .3.1.2.4zM29 11.5c.4-.3.7-.4 1-.5 1-.2 1.9.6 1.9 1.6v1.7c0 .1 0 .2-.2.2h-1.1c-.2 0-.2-.1-.2-.2v-1.9c0-.5-.3-.8-.7-.8-.4 0-.7.3-.7.8v1.9c0 .2 0 .2-.2.2h-1.1c-.1 0-.2 0-.2-.2v-3c0-.2.1-.2.2-.2h1c.2.1.4 0 .3.4zM39.5 10.9c.6 0 1.1.2 1.5.5.9.7.9 1.9 0 2.7-.9.8-2.3.8-3.2 0-.9-.7-.8-1.9 0-2.7.6-.3 1.1-.5 1.7-.5zm-.6 1.9v.9c0 .4.3.6.6.6s.6-.3.6-.6V12c0-.4-.3-.6-.6-.7-.4 0-.6.2-.6.6v.9zM25.5 12.9h-1.2c-.2 0-.2 0-.2.2v.7c.1.3.3.5.6.5s.6-.2.6-.6c.1-.4.1-.4.4-.4h.9c.2 0 .2.1.1.2-.3.6-.8 1-1.5 1.1-.9.2-1.7 0-2.3-.6-.8-.7-.7-1.8 0-2.5.9-.9 2.5-.8 3.4 0 .3.3.5.6.5 1 0 .2 0 .2-.2.2-.2.1-.7.2-1.1.2zm-.8-.6h.5c.1 0 .1 0 .1-.1.1-.3-.1-.8-.4-.9-.2-.1-.5 0-.6.2-.2.2-.2.5-.2.7 0 .1.1.1.2.1h.4zM20.3 12.8v-1.5c0-.1 0-.2-.2-.2h-.5c-.1 0-.2 0-.2-.1 0-.4 0-.4.3-.4.5 0 .5 0 .5-.5 0-.2.1-.2.2-.2h1.1c.1 0 .2 0 .2.2 0 .5 0 .5.5.5.3 0 .4.1.3.4 0 .1-.1.1-.1.1h-.5c-.2 0-.2 0-.2.2v2.9c0 .2-.1.3-.3.3h-1c-.2 0-.3 0-.3-.3.2-.4.2-.9.2-1.4zM14.1 12.8v1.5c0 .1 0 .2-.2.2h-1.1c-.2 0-.2-.1-.2-.2v-3c0-.1 0-.2.2-.2H14c.1 0 .2.1.2.2-.1.5-.1 1-.1 1.5zM13.4 9.4h.6c.1 0 .2 0 .2.1v.7c0 .1 0 .2-.2.2h-1.2c-.1 0-.2 0-.2-.2v-.7c0-.1 0-.2.2-.2.2.2.4.1.6.1zM43.1 10.1c0 .6-.4 1-1 1s-1-.4-1-1 .5-1 1-1 1 .4 1 1zm-1 .8c.5 0 .8-.4.8-.8 0-.5-.4-.8-.8-.8-.5 0-.8.4-.8.8-.1.5.3.8.8.8z"/><path d="M42.5 10.6c-.1.1-.2 0-.2-.1-.1-.1-.1-.2-.2-.3 0-.1-.1-.1-.2-.1s-.1.1-.1.2v.2s0 .1-.1.1-.1 0-.1-.1v-1s0-.1.1-.1h.5c.1 0 .2.1.2.2s0 .3-.1.3c-.2.1-.1.1 0 .2.1.3.2.4.2.5zM42 10c.1 0 .3 0 .3-.2s-.2-.2-.3-.2c-.1 0-.2 0-.2.2s.1.2.2.2z"/>
</symbol>
<symbol id="platform-pc" viewBox="0 0 24 24">
<title>platform-pc icon</title>
<g fill="#404040"><path d="M2 4.9l8.2-1.2v7.9H2M11.2 3.6L22 2v9.5H11.2M2 12.4h8.2v7.9L2 19.2M11.2 12.5H22V22l-10.8-1.5"/></g>
</symbol>
<symbol id="platform-ps" viewBox="0 0 24 24">
<title>platform-ps icon</title>
<path d="M9.3 11.4v-8-.1c1.6.4 3.1.9 4.7 1.3.9.4 1.8.8 2.6 1.4 1.3 1 1.8 2.3 1.7 3.9 0 .7-.1 1.5-.4 2.1-.2.6-.6 1.1-1.3 1.3-.6.2-1.1.1-1.7 0-.2-.1-.4-.2-.7-.3 0 0-.1 0-.1-.1V7.1c0-.5-.4-.9-.8-1-.3 0-.5.2-.6.5v14s0 .1-.1 0c-1.1-.4-2.3-.8-3.4-1.2v-.1-5.1c.1-.9.1-1.8.1-2.8z" fill="#404040"/><path d="M13.5 15.8v-1s0-.1.1-.1c.7-.3 1.4-.4 2.1-.6.9-.2 1.8-.2 2.7-.2 1.2.1 2.4.3 3.5.8.4.2.7.4 1 .7.4.5.4.9-.1 1.3s-1 .7-1.6.9l-7.5 2.7c-.1 0-.1 0-.1-.1v-2-.1c1.7-.6 3.4-1.2 5.1-1.9.3-.1.5-.2.8-.3.1-.1.2-.1.3-.2.1-.1.1-.3-.1-.4-.2-.1-.4-.1-.6-.2-.7-.1-1.4.1-2 .3-1.2.4-2.3.8-3.4 1.2h-.1c-.1-.1-.1-.4-.1-.8zM8.6 14.2v1.1c-1.3.5-2.5 1-3.8 1.4-.1 0-.2.1-.3.1-.1.1-.1.3 0 .4.2.1.3.2.5.2.4 0 .8.1 1.2 0 .6-.1 1.1-.3 1.6-.5.2-.1.4-.2.6-.2h.1V18.6c-.9.2-1.8.3-2.8.2-.7-.1-1.4-.2-2.1-.4-.6-.1-1.2-.3-1.8-.6-.2-.1-.3-.2-.4-.3-.4-.4-.4-1 0-1.4.3-.3.8-.5 1.2-.7.9-.4 1.9-.7 2.8-1.1 1-.4 2.1-.8 3.1-1.1h.1v1z" fill="#404040"/>
</symbol>
<symbol id="platform-sega" viewBox="0 0 24 24">
<title>platform-sega icon</title>
<g fill="#404040"><path d="M16.6 14.6c.1-.3.2-.5.3-.8.2-.5.4-1 .5-1.5.2-.5.4-1.1.5-1.6.1-.4.3-.9.4-1.3.1-.3.3-.4.5-.6.3-.2.6-.2.9-.2.6.1 1 .4 1.2 1 .1.3.2.6.3.8.1.4.3.9.4 1.3.2.5.3 1 .5 1.5s.4 1.1.5 1.6c0 .1.1.2.1.3 0 .1 0 .1-.1.1h-3.5c-.1 0-.1 0-.1-.1v-.7c0-.1 0-.1.1-.1h2.2c.1 0 .1 0 .1-.1-.2-.5-.4-1.1-.5-1.6-.2-.6-.4-1.2-.6-1.9-.1-.3-.2-.7-.3-1-.1-.2-.2-.3-.4-.4-.2-.1-.5.1-.6.3-.1.2-.1.4-.2.6-.1.2-.2.5-.2.7l-.3.9-.3.9-.3.9-.3.9c-.1.2-.1.4-.2.6 0 .1-.1.1-.1.1H13.4c-.6 0-1.1-.3-1.5-.8-.2-.3-.3-.7-.3-1.1v-2.9c0-.7.3-1.3 1-1.6.3-.1.5-.2.8-.2h2.9c.1 0 .1 0 .1.1v.6c0 .1 0 .1-.1.1h-2.9c-.5 0-.9.4-.9.9v2.9c0 .4.2.6.5.8.1.1.3.1.4.1h2c.1 0 .1 0 .1-.1v-2.2c0-.1 0-.1-.1-.1H14c-.1 0-.1 0-.1-.1v-.7c0-.1 0-.1.1-.1h2.4c.1 0 .1 0 .1.1v3.3c.1.3.1.4.1.4zM2.6 14.4H4c.5 0 1-.3 1.1-.8.2-.5 0-1.1-.4-1.4-.3-.2-.5-.2-.8-.3h-.7c-.6 0-1.1-.5-1-1.1 0-.5.4-.9.9-.9H6c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1H3.3h-.1c-.1 0-.1 0-.1.1s0 .1.1.1h.9c.5 0 .9.2 1.3.5.3.2.5.5.6.8 0 .3.1.5.1.7 0 .4 0 .7-.2 1-.2.3-.4.6-.7.8-.3.2-.7.4-1 .4h-3c-.1 0-.1 0-.1-.1v-.7c0-.1 0-.1.1-.1.4.1.9.1 1.4.1z"/><path d="M2.6 14.2H1.2c-.2 0-.2 0-.2-.2v-.6c0-.1 0-.1.1-.1h2.7c.1 0 .2 0 .2-.1s-.1-.1-.2-.1h-.7c-.4 0-.7-.1-1.1-.3-.5-.3-.8-.7-.9-1.2-.2-.6-.1-1.2.2-1.8.3-.5.8-.9 1.4-1h3.2c.1 0 .1 0 .1.1v.8s0 .1-.1.1H3c-.5 0-.8.2-1.1.6-.3.5-.2 1.1.2 1.4.2.2.5.3.8.4h.9c.3 0 .6.2.7.4.3.4.2 1-.1 1.3-.2.2-.4.3-.7.3H2.6zM6.5 12v-1.5c0-.5.2-.9.6-1.3.3-.2.6-.3.9-.4H11.3c.1 0 .1 0 .1.1v.6c0 .1 0 .1-.1.1h-3c-.5 0-.9.4-.9.9v2.9c0 .5.4.9.9.9h3c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1H8.2c-.4 0-.7-.1-1-.4-.4-.3-.6-.7-.7-1.2v-.1V12zM19.3 13.5c-.1.2-.2.5-.3.7-.1.2-.2.5-.2.7 0 .1-.1.2-.1.3 0 .1 0 .1-.1.1h-.9c-.1 0-.1 0-.1-.1l.3-.9c.1-.4.2-.7.4-1.1l.3-.9.3-.9.3-.9c.1-.2.2-.5.2-.7.1-.2.1-.2.3-.2.1 0 .2.1.3.2.1.4.2.7.4 1.1.1.4.3.7.4 1.1.1.3.2.7.3 1 .1.3.2.6.3 1 0 .1 0 .1-.1.1h-1.9c-.1 0-.1 0-.1-.1v-.5zm.4-1.2c-.1.3-.2.6-.3.8 0 .1 0 0 .1 0h.5c.1 0 .1 0 0-.1-.1-.2-.2-.4-.3-.7zM12.9 12v-1.5c0-.3.3-.6.6-.7h3c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1h-2.4c-.2 0-.3.1-.3.3v1.9c0 .2.1.3.3.3h.4c.1 0 .1 0 .1-.1s0-.1-.1-.1h-.3c-.2.1-.2 0-.2 0v-.7c0-.1 0-.1.1-.1h1.3c.1 0 .1 0 .1.1v1.9c0 .1 0 .1-.1.1h-1.9c-.3 0-.6-.3-.6-.7V12z"/><path d="M9.8 9.9h1.5c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1H8.8c-.1 0-.2 0-.2.1v.1h2.1c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1h-3c-.1 0-.1 0-.1-.1v-1.3c0-.3.2-.6.6-.6h1.6zM9.8 14.2H8.3c-.4 0-.7-.3-.7-.7v-1.2c0-.1 0-.1.1-.1h2.9c.2 0 .2 0 .2.2v.6c0 .1 0 .1-.1.1h-2-.1c0 .1 0 .1.1.1h2.6c.1 0 .1 0 .1.1v.7c0 .1 0 .1-.1.1-.5.1-1 .1-1.5.1z"/></g>
</symbol>
<symbol id="platform-xbox" viewBox="0 0 24 24">
<title>platform-xbox icon</title>
<g fill="#404040"><path d="M2 11.7c0-.3.1-.5.1-.8.2-2 1-3.8 2.3-5.3.1-.3.3-.4.5-.6.2-.2.4-.2.7-.2.4.2.9.4 1.3.7.5.3 2.1 1.6 2.4 2-.2.2-.4.5-.6.7-1.5 1.9-2.8 4-3.9 6.2-.4.8-.6 1.6-.8 2.4-.1.4-.1.8 0 1.2v.1c0-.1 0-.2-.1-.2-.9-1.3-1.5-2.8-1.8-4.4-.1-.4-.1-.7-.1-1.1v-.1-.6zM22 13.1c0 .3-.1.5-.1.8-.3 1.5-.9 2.8-1.7 4.1l-.1.1v-.3c.1-.5 0-1.1-.1-1.6-.2-.9-.7-1.8-1.1-2.7-1.1-2.1-2.4-4.1-3.9-5.9l-.1-.1c.7-.7 1.5-1.4 2.3-1.9.5-.3 1-.6 1.5-.7.2 0 .3 0 .4.1.4.4.8.8 1.1 1.3.9 1.2 1.4 2.6 1.7 4.1 0 .2 0 .4.1.6v2.1zM12.7 2c.2 0 .5 0 .7.1.8.1 1.5.3 2.3.6.5.2 1 .4 1.5.7h-.1c-1.2-.1-2.4.3-3.5.7-.5.2-1 .4-1.5.7-.1.1-.2 0-.3 0-.8-.4-1.6-.8-2.5-1.1-.6-.2-1.3-.4-2.1-.3H7l.1-.1c1.3-.7 2.7-1.2 4.2-1.3h1.4zM11.6 22c-1.4 0-3-.4-4.4-1.2-.5-.3-1-.6-1.4-.9-.6-.4-.8-1-.6-1.7.1-.5.4-1.1.7-1.5.6-1 1.3-2 2.1-2.9 1-1.2 2.1-2.3 3.3-3.3.1-.1.3-.2.4-.3.2-.1.2-.1.4 0 .3.3.7.6 1 .9 1.2 1.1 2.3 2.2 3.3 3.4.7.9 1.4 1.8 1.9 2.9.2.4.3.7.4 1.1.1.5-.1.9-.5 1.2-.6.5-1.3.9-2 1.3-1.3.7-2.8 1-4.6 1z"/></g>
</symbol>
<symbol id="play-arrow" viewBox="0 0 24 24">
<title>play-arrow icon</title>
<path fill="#404040" d="M8 5v14l11-7z"/>
</symbol>
<symbol id="profile" viewBox="0 0 24 24">
<title>profile icon</title>
<path fill="#404040" d="M19 3h-4.185c-.41-1.16-1.51-2-2.815-2s-2.405.84-2.815 2H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zm-7 0c.55 0 1 .445 1 1s-.45 1-1 1-1-.445-1-1 .45-1 1-1zm0 4c1.655 0 3 1.345 3 3 0 1.66-1.345 3-3 3s-3-1.34-3-3c0-1.655 1.345-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"/>
</symbol>
<symbol id="remove-circle-outline" viewBox="0 0 24 24">
<title>remove-circle-outline icon</title>
<path fill="#404040" d="M7 11v2h10v-2H7zm5-9C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</symbol>
<symbol id="remove-circle" viewBox="0 0 24 24">
<title>remove-circle icon</title>
<path fill="#404040" d="M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10 10-4.475 10-10S17.525 2 12 2zm5 11H7v-2h10v2z"/>
</symbol>
<symbol id="remove" viewBox="0 0 24 24">
<title>remove icon</title>
<path fill="#404040" d="M19 13H5v-2h14v2z"/>
</symbol>
<symbol id="search" viewBox="0 0 24 24">
<title>search icon</title>
<path fill="#404040" d="M15.5 14h-.795l-.275-.275C15.41 12.59 16 11.115 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.615 0 3.09-.59 4.225-1.565l.275.275v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.015 14 5 11.985 5 9.5S7.015 5 9.5 5 14 7.015 14 9.5 11.985 14 9.5 14z"/>
</symbol>
<symbol id="server" viewBox="0 0 24 24">
<title>server icon</title>
<path fill="#404040" d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
</symbol>
<symbol id="settings" viewBox="0 0 24 24">
<title>settings icon</title>
<path fill="#404040" d="M19.43 12.975c.04-.32.07-.645.07-.975s-.03-.655-.07-.975l2.115-1.655c.19-.15.245-.42.12-.64l-2-3.465c-.125-.215-.385-.305-.61-.215l-2.49 1.005c-.515-.395-1.08-.73-1.69-.985L14.5 2.42c-.045-.235-.25-.42-.5-.42h-4c-.25 0-.455.185-.495.42L9.13 5.07c-.61.255-1.175.585-1.69.985L4.95 5.05c-.225-.085-.485 0-.61.215l-2 3.465c-.125.215-.07.485.12.64l2.11 1.655c-.04.32-.07.645-.07.975s.03.655.07.975L2.46 14.63c-.19.15-.245.42-.12.64l2 3.465c.125.215.385.305.61.215l2.49-1.005c.515.395 1.08.73 1.69.985l.375 2.65c.04.235.245.42.495.42h4c.25 0 .455-.185.495-.42l.375-2.65c.61-.255 1.175-.585 1.69-.985l2.49 1.005c.225.085.485 0 .61-.215l2-3.465c.125-.215.07-.485-.12-.64l-2.11-1.655zM12 15.5c-1.935 0-3.5-1.565-3.5-3.5s1.565-3.5 3.5-3.5 3.5 1.565 3.5 3.5-1.565 3.5-3.5 3.5z"/>
</symbol>
<symbol id="share" viewBox="0 0 24 24">
<title>share icon</title>
<path fill="#404040" d="M18 16.078q1.22 0 2.063.867t.844 2.04q0 1.218-.867 2.085t-2.04.867-2.038-.867-.867-2.086q0-.47.047-.656l-7.078-4.125Q7.174 15 6 15q-1.218 0-2.108-.89T3.002 12t.89-2.11T6.002 9q1.17 0 2.062.797l7.03-4.078q-.093-.47-.093-.704 0-1.22.892-2.11t2.11-.89 2.108.89.89 2.11-.89 2.11-2.11.89q-1.124 0-2.062-.844l-7.03 4.125Q9 11.767 9 12t-.093.703l7.125 4.125q.844-.75 1.97-.75z"/>
</symbol>
<symbol id="star-outline" viewBox="0 0 24 24">
<title>star-outline icon</title>
<path fill="#404040" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
</symbol>
<symbol id="star" viewBox="0 0 24 24">
<title>star icon</title>
<path fill="#404040" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</symbol>
<symbol id="sync" viewBox="0 0 24 24">
<title>sync icon</title>
<path fill="#404040" d="M12 4V1L8 5l4 4V6c3.315 0 6 2.685 6 6 0 1.015-.255 1.965-.695 2.805l1.46 1.46C19.54 15.025 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.315 0-6-2.685-6-6 0-1.015.255-1.965.695-2.805l-1.46-1.46C4.46 8.975 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
</symbol>
<symbol id="thumb-down" viewBox="0 0 24 24">
<title>thumb-down icon</title>
<path fill="#404040" d="M15 3H6c-.83 0-1.54.505-1.84 1.22l-3.015 7.05c-.09.23-.145.475-.145.73v1.915l.01.01L1 14c0 1.105.895 2 2 2h6.315l-.955 4.57c-.02.1-.035.205-.035.315 0 .415.17.79.44 1.06L9.83 23l6.585-6.585c.36-.365.585-.865.585-1.415V5c0-1.105-.895-2-2-2zm4 0v12h4V3h-4z"/>
</symbol>
<symbol id="thumb-up" viewBox="0 0 24 24">
<title>thumb-up icon</title>
<path fill="#404040" d="M1 21h4V9H1v12zm22-11c0-1.105-.895-2-2-2h-6.315l.955-4.57c.02-.1.035-.205.035-.315 0-.415-.17-.79-.44-1.06L14.17 1 7.585 7.585C7.225 7.95 7 8.45 7 9v10c0 1.105.895 2 2 2h9c.83 0 1.54-.505 1.84-1.22l3.015-7.05c.09-.23.145-.475.145-.73v-1.915l-.01-.01L23 10z"/>
</symbol>
<symbol id="twiiter" viewBox="0 0 24 24">
<title>twiiter icon</title>
<style>.st0{fill:none;}</style><path class="st0" d="M15.5 3.9H16.3c.9.1 1.7.5 2.4 1.1.1.1.1.1.2.1.8-.2 1.5-.4 2.1-.8.1 0 .2-.1.3-.1v.1c-.3.9-.8 1.5-1.6 2 0 0-.1 0-.1.1.8-.1 1.5-.3 2.3-.6 0 0 0 .1-.1.1-.5.8-1.1 1.4-1.9 2 .1 0 .1.1.1.1 0 .8 0 1.7-.2 2.5-.3 1.6-.9 3-1.7 4.4-.9 1.3-1.9 2.5-3.2 3.3-1.7 1.1-3.6 1.8-5.6 1.9H7.9h-.1c-.5 0-1.1-.1-1.6-.2-1.5-.3-2.8-.8-4.1-1.6 0 0-.1 0-.1-.1 1.1.1 2.1 0 3.2-.3.9-.3 2.7-1.1 2.8-1.4-.7 0-1.3-.2-1.9-.5-.9-.5-1.5-1.3-1.9-2.2 0-.1 0-.1.1-.1.5.1.9.1 1.4 0 .1 0 .2 0 .3-.1h-.1c-.9-.2-1.6-.6-2.2-1.3-.6-.7-.9-1.6-.9-2.5 0-.1 0-.1.1-.1.5.2 1 .4 1.5.4h.2s-.1 0-.1-.1c-.2-.1-.4-.3-.6-.5-.8-.9-1.2-1.9-1.1-3 0-.6.2-1.2.5-1.8 0-.1.1-.1.1 0 .4.4.7.8 1.1 1.2C5.6 6.8 6.7 7.5 8 8c1.2.5 2.4.8 3.7.8.1 0 .1 0 .1-.1-.1-.5-.1-.9 0-1.4.2-1.6 1.5-3 3.2-3.4h.5z" id="unGckr.tif"/>
</symbol>
<symbol id="view-headline" viewBox="0 0 24 24">
<title>view-headline icon</title>
<path fill="#404040" d="M4 15h17v-2H4v2zm0 4h17v-2H4v2zm0-8h17V9H4v2zm0-6v2h17V5H4z"/>
</symbol>
<symbol id="view-list" viewBox="0 0 24 24">
<title>view-list icon</title>
<path fill="#404040" d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/>
</symbol>
<symbol id="view-module" viewBox="0 0 24 24">
<title>view-module icon</title>
<path fill="#404040" d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/>
</symbol>
<symbol id="warning-stop" viewBox="0 0 24 24">
<title>warning-stop icon</title>
<path fill="#404040" d="M15.73 3H8.27L3 8.27v7.455L8.27 21h7.455L21 15.73V8.27L15.73 3zM12 17.3c-.715 0-1.3-.58-1.3-1.3 0-.715.585-1.3 1.3-1.3s1.3.58 1.3 1.3c0 .72-.585 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/>
</symbol>
<symbol id="warning" viewBox="0 0 24 24">
<title>warning icon</title>
<path fill="#404040" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
</symbol></svg>
<h1>Gulp SVG Symbols demo page</h1>
<main>
<div class="icon">
<p>#add-circle-outline</p>
<div class="icon-wrapper">
<svg role="img" class="add-circle-outline">
<use xlink:href="#add-circle-outline"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-add-circle-outline" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-add-circle-outline')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-add-circle-outline')" for="toggle-add-circle-outline">Show</label>
</div>
<pre>
<code id="code-add-circle-outline"><svg role="img" class="add-circle-outline">
<use xlink:href="#add-circle-outline"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#add-circle</p>
<div class="icon-wrapper">
<svg role="img" class="add-circle">
<use xlink:href="#add-circle"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-add-circle" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-add-circle')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-add-circle')" for="toggle-add-circle">Show</label>
</div>
<pre>
<code id="code-add-circle"><svg role="img" class="add-circle">
<use xlink:href="#add-circle"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#add</p>
<div class="icon-wrapper">
<svg role="img" class="add">
<use xlink:href="#add"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-add" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-add')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-add')" for="toggle-add">Show</label>
</div>
<pre>
<code id="code-add"><svg role="img" class="add">
<use xlink:href="#add"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#apps</p>
<div class="icon-wrapper">
<svg role="img" class="apps">
<use xlink:href="#apps"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-apps" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-apps')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-apps')" for="toggle-apps">Show</label>
</div>
<pre>
<code id="code-apps"><svg role="img" class="apps">
<use xlink:href="#apps"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-back</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-back">
<use xlink:href="#arrow-back"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-back" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-back')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-back')" for="toggle-arrow-back">Show</label>
</div>
<pre>
<code id="code-arrow-back"><svg role="img" class="arrow-back">
<use xlink:href="#arrow-back"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-down</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-down">
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-down" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-down')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-down')" for="toggle-arrow-down">Show</label>
</div>
<pre>
<code id="code-arrow-down"><svg role="img" class="arrow-down">
<use xlink:href="#arrow-down"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-drop-down</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-drop-down">
<use xlink:href="#arrow-drop-down"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-drop-down" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-drop-down')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-drop-down')" for="toggle-arrow-drop-down">Show</label>
</div>
<pre>
<code id="code-arrow-drop-down"><svg role="img" class="arrow-drop-down">
<use xlink:href="#arrow-drop-down"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-drop-up</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-drop-up">
<use xlink:href="#arrow-drop-up"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-drop-up" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-drop-up')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-drop-up')" for="toggle-arrow-drop-up">Show</label>
</div>
<pre>
<code id="code-arrow-drop-up"><svg role="img" class="arrow-drop-up">
<use xlink:href="#arrow-drop-up"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-forward</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-forward">
<use xlink:href="#arrow-forward"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-forward" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-forward')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-forward')" for="toggle-arrow-forward">Show</label>
</div>
<pre>
<code id="code-arrow-forward"><svg role="img" class="arrow-forward">
<use xlink:href="#arrow-forward"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#arrow-up</p>
<div class="icon-wrapper">
<svg role="img" class="arrow-up">
<use xlink:href="#arrow-up"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-arrow-up" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-arrow-up')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-arrow-up')" for="toggle-arrow-up">Show</label>
</div>
<pre>
<code id="code-arrow-up"><svg role="img" class="arrow-up">
<use xlink:href="#arrow-up"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#book</p>
<div class="icon-wrapper">
<svg role="img" class="book">
<use xlink:href="#book"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-book" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-book')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-book')" for="toggle-book">Show</label>
</div>
<pre>
<code id="code-book"><svg role="img" class="book">
<use xlink:href="#book"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#bookmark-outline-plus</p>
<div class="icon-wrapper">
<svg role="img" class="bookmark-outline-plus">
<use xlink:href="#bookmark-outline-plus"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-bookmark-outline-plus" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-bookmark-outline-plus')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-bookmark-outline-plus')" for="toggle-bookmark-outline-plus">Show</label>
</div>
<pre>
<code id="code-bookmark-outline-plus"><svg role="img" class="bookmark-outline-plus">
<use xlink:href="#bookmark-outline-plus"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#bookmark-remove</p>
<div class="icon-wrapper">
<svg role="img" class="bookmark-remove">
<use xlink:href="#bookmark-remove"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-bookmark-remove" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-bookmark-remove')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-bookmark-remove')" for="toggle-bookmark-remove">Show</label>
</div>
<pre>
<code id="code-bookmark-remove"><svg role="img" class="bookmark-remove">
<use xlink:href="#bookmark-remove"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#check-box-outline-blank</p>
<div class="icon-wrapper">
<svg role="img" class="check-box-outline-blank">
<use xlink:href="#check-box-outline-blank"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-check-box-outline-blank" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-check-box-outline-blank')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-check-box-outline-blank')" for="toggle-check-box-outline-blank">Show</label>
</div>
<pre>
<code id="code-check-box-outline-blank"><svg role="img" class="check-box-outline-blank">
<use xlink:href="#check-box-outline-blank"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#check-box</p>
<div class="icon-wrapper">
<svg role="img" class="check-box">
<use xlink:href="#check-box"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-check-box" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-check-box')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-check-box')" for="toggle-check-box">Show</label>
</div>
<pre>
<code id="code-check-box"><svg role="img" class="check-box">
<use xlink:href="#check-box"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#check</p>
<div class="icon-wrapper">
<svg role="img" class="check">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-check" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-check')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-check')" for="toggle-check">Show</label>
</div>
<pre>
<code id="code-check"><svg role="img" class="check">
<use xlink:href="#check"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#chevron-left</p>
<div class="icon-wrapper">
<svg role="img" class="chevron-left">
<use xlink:href="#chevron-left"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-chevron-left" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-chevron-left')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-chevron-left')" for="toggle-chevron-left">Show</label>
</div>
<pre>
<code id="code-chevron-left"><svg role="img" class="chevron-left">
<use xlink:href="#chevron-left"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#chevron-right</p>
<div class="icon-wrapper">
<svg role="img" class="chevron-right">
<use xlink:href="#chevron-right"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-chevron-right" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-chevron-right')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-chevron-right')" for="toggle-chevron-right">Show</label>
</div>
<pre>
<code id="code-chevron-right"><svg role="img" class="chevron-right">
<use xlink:href="#chevron-right"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#close</p>
<div class="icon-wrapper">
<svg role="img" class="close">
<use xlink:href="#close"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-close" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-close')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-close')" for="toggle-close">Show</label>
</div>
<pre>
<code id="code-close"><svg role="img" class="close">
<use xlink:href="#close"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#delete</p>
<div class="icon-wrapper">
<svg role="img" class="delete">
<use xlink:href="#delete"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-delete" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-delete')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-delete')" for="toggle-delete">Show</label>
</div>
<pre>
<code id="code-delete"><svg role="img" class="delete">
<use xlink:href="#delete"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#do-not-disturb</p>
<div class="icon-wrapper">
<svg role="img" class="do-not-disturb">
<use xlink:href="#do-not-disturb"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-do-not-disturb" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-do-not-disturb')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-do-not-disturb')" for="toggle-do-not-disturb">Show</label>
</div>
<pre>
<code id="code-do-not-disturb"><svg role="img" class="do-not-disturb">
<use xlink:href="#do-not-disturb"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#done</p>
<div class="icon-wrapper">
<svg role="img" class="done">
<use xlink:href="#done"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-done" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-done')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-done')" for="toggle-done">Show</label>
</div>
<pre>
<code id="code-done"><svg role="img" class="done">
<use xlink:href="#done"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#edit</p>
<div class="icon-wrapper">
<svg role="img" class="edit">
<use xlink:href="#edit"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-edit" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-edit')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-edit')" for="toggle-edit">Show</label>
</div>
<pre>
<code id="code-edit"><svg role="img" class="edit">
<use xlink:href="#edit"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#email</p>
<div class="icon-wrapper">
<svg role="img" class="email">
<use xlink:href="#email"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-email" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-email')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-email')" for="toggle-email">Show</label>
</div>
<pre>
<code id="code-email"><svg role="img" class="email">
<use xlink:href="#email"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#error</p>
<div class="icon-wrapper">
<svg role="img" class="error">
<use xlink:href="#error"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-error" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-error')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-error')" for="toggle-error">Show</label>
</div>
<pre>
<code id="code-error"><svg role="img" class="error">
<use xlink:href="#error"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#file-image</p>
<div class="icon-wrapper">
<svg role="img" class="file-image">
<use xlink:href="#file-image"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-file-image" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-file-image')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-file-image')" for="toggle-file-image">Show</label>
</div>
<pre>
<code id="code-file-image"><svg role="img" class="file-image">
<use xlink:href="#file-image"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#file</p>
<div class="icon-wrapper">
<svg role="img" class="file">
<use xlink:href="#file"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-file" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-file')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-file')" for="toggle-file">Show</label>
</div>
<pre>
<code id="code-file"><svg role="img" class="file">
<use xlink:href="#file"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#grid-on</p>
<div class="icon-wrapper">
<svg role="img" class="grid-on">
<use xlink:href="#grid-on"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-grid-on" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-grid-on')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-grid-on')" for="toggle-grid-on">Show</label>
</div>
<pre>
<code id="code-grid-on"><svg role="img" class="grid-on">
<use xlink:href="#grid-on"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#help</p>
<div class="icon-wrapper">
<svg role="img" class="help">
<use xlink:href="#help"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-help" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-help')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-help')" for="toggle-help">Show</label>
</div>
<pre>
<code id="code-help"><svg role="img" class="help">
<use xlink:href="#help"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#image</p>
<div class="icon-wrapper">
<svg role="img" class="image">
<use xlink:href="#image"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-image" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-image')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-image')" for="toggle-image">Show</label>
</div>
<pre>
<code id="code-image"><svg role="img" class="image">
<use xlink:href="#image"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#info-outline</p>
<div class="icon-wrapper">
<svg role="img" class="info-outline">
<use xlink:href="#info-outline"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-info-outline" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-info-outline')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-info-outline')" for="toggle-info-outline">Show</label>
</div>
<pre>
<code id="code-info-outline"><svg role="img" class="info-outline">
<use xlink:href="#info-outline"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#info</p>
<div class="icon-wrapper">
<svg role="img" class="info">
<use xlink:href="#info"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-info" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-info')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-info')" for="toggle-info">Show</label>
</div>
<pre>
<code id="code-info"><svg role="img" class="info">
<use xlink:href="#info"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#list</p>
<div class="icon-wrapper">
<svg role="img" class="list">
<use xlink:href="#list"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-list" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-list')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-list')" for="toggle-list">Show</label>
</div>
<pre>
<code id="code-list"><svg role="img" class="list">
<use xlink:href="#list"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#menu</p>
<div class="icon-wrapper">
<svg role="img" class="menu">
<use xlink:href="#menu"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-menu" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-menu')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-menu')" for="toggle-menu">Show</label>
</div>
<pre>
<code id="code-menu"><svg role="img" class="menu">
<use xlink:href="#menu"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#more-horiz</p>
<div class="icon-wrapper">
<svg role="img" class="more-horiz">
<use xlink:href="#more-horiz"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-more-horiz" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-more-horiz')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-more-horiz')" for="toggle-more-horiz">Show</label>
</div>
<pre>
<code id="code-more-horiz"><svg role="img" class="more-horiz">
<use xlink:href="#more-horiz"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#more-vert</p>
<div class="icon-wrapper">
<svg role="img" class="more-vert">
<use xlink:href="#more-vert"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-more-vert" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-more-vert')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-more-vert')" for="toggle-more-vert">Show</label>
</div>
<pre>
<code id="code-more-vert"><svg role="img" class="more-vert">
<use xlink:href="#more-vert"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#notifications</p>
<div class="icon-wrapper">
<svg role="img" class="notifications">
<use xlink:href="#notifications"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-notifications" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-notifications')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-notifications')" for="toggle-notifications">Show</label>
</div>
<pre>
<code id="code-notifications"><svg role="img" class="notifications">
<use xlink:href="#notifications"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#pause</p>
<div class="icon-wrapper">
<svg role="img" class="pause">
<use xlink:href="#pause"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-pause" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-pause')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-pause')" for="toggle-pause">Show</label>
</div>
<pre>
<code id="code-pause"><svg role="img" class="pause">
<use xlink:href="#pause"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#people</p>
<div class="icon-wrapper">
<svg role="img" class="people">
<use xlink:href="#people"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-people" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-people')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-people')" for="toggle-people">Show</label>
</div>
<pre>
<code id="code-people"><svg role="img" class="people">
<use xlink:href="#people"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-3ds</p>
<div class="icon-wrapper">
<svg role="img" class="platform-3ds">
<use xlink:href="#platform-3ds"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-3ds" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-3ds')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-3ds')" for="toggle-platform-3ds">Show</label>
</div>
<pre>
<code id="code-platform-3ds"><svg role="img" class="platform-3ds">
<use xlink:href="#platform-3ds"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-linux</p>
<div class="icon-wrapper">
<svg role="img" class="platform-linux">
<use xlink:href="#platform-linux"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-linux" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-linux')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-linux')" for="toggle-platform-linux">Show</label>
</div>
<pre>
<code id="code-platform-linux"><svg role="img" class="platform-linux">
<use xlink:href="#platform-linux"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-mac</p>
<div class="icon-wrapper">
<svg role="img" class="platform-mac">
<use xlink:href="#platform-mac"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-mac" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-mac')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-mac')" for="toggle-platform-mac">Show</label>
</div>
<pre>
<code id="code-platform-mac"><svg role="img" class="platform-mac">
<use xlink:href="#platform-mac"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-nintendo</p>
<div class="icon-wrapper">
<svg role="img" class="platform-nintendo">
<use xlink:href="#platform-nintendo"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-nintendo" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-nintendo')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-nintendo')" for="toggle-platform-nintendo">Show</label>
</div>
<pre>
<code id="code-platform-nintendo"><svg role="img" class="platform-nintendo">
<use xlink:href="#platform-nintendo"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-pc</p>
<div class="icon-wrapper">
<svg role="img" class="platform-pc">
<use xlink:href="#platform-pc"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-pc" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-pc')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-pc')" for="toggle-platform-pc">Show</label>
</div>
<pre>
<code id="code-platform-pc"><svg role="img" class="platform-pc">
<use xlink:href="#platform-pc"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-ps</p>
<div class="icon-wrapper">
<svg role="img" class="platform-ps">
<use xlink:href="#platform-ps"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-ps" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-ps')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-ps')" for="toggle-platform-ps">Show</label>
</div>
<pre>
<code id="code-platform-ps"><svg role="img" class="platform-ps">
<use xlink:href="#platform-ps"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-sega</p>
<div class="icon-wrapper">
<svg role="img" class="platform-sega">
<use xlink:href="#platform-sega"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-sega" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-sega')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-sega')" for="toggle-platform-sega">Show</label>
</div>
<pre>
<code id="code-platform-sega"><svg role="img" class="platform-sega">
<use xlink:href="#platform-sega"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#platform-xbox</p>
<div class="icon-wrapper">
<svg role="img" class="platform-xbox">
<use xlink:href="#platform-xbox"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-platform-xbox" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-platform-xbox')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-platform-xbox')" for="toggle-platform-xbox">Show</label>
</div>
<pre>
<code id="code-platform-xbox"><svg role="img" class="platform-xbox">
<use xlink:href="#platform-xbox"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#play-arrow</p>
<div class="icon-wrapper">
<svg role="img" class="play-arrow">
<use xlink:href="#play-arrow"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-play-arrow" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-play-arrow')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-play-arrow')" for="toggle-play-arrow">Show</label>
</div>
<pre>
<code id="code-play-arrow"><svg role="img" class="play-arrow">
<use xlink:href="#play-arrow"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#profile</p>
<div class="icon-wrapper">
<svg role="img" class="profile">
<use xlink:href="#profile"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-profile" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-profile')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-profile')" for="toggle-profile">Show</label>
</div>
<pre>
<code id="code-profile"><svg role="img" class="profile">
<use xlink:href="#profile"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#remove-circle-outline</p>
<div class="icon-wrapper">
<svg role="img" class="remove-circle-outline">
<use xlink:href="#remove-circle-outline"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-remove-circle-outline" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-remove-circle-outline')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-remove-circle-outline')" for="toggle-remove-circle-outline">Show</label>
</div>
<pre>
<code id="code-remove-circle-outline"><svg role="img" class="remove-circle-outline">
<use xlink:href="#remove-circle-outline"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#remove-circle</p>
<div class="icon-wrapper">
<svg role="img" class="remove-circle">
<use xlink:href="#remove-circle"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-remove-circle" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-remove-circle')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-remove-circle')" for="toggle-remove-circle">Show</label>
</div>
<pre>
<code id="code-remove-circle"><svg role="img" class="remove-circle">
<use xlink:href="#remove-circle"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#remove</p>
<div class="icon-wrapper">
<svg role="img" class="remove">
<use xlink:href="#remove"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-remove" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-remove')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-remove')" for="toggle-remove">Show</label>
</div>
<pre>
<code id="code-remove"><svg role="img" class="remove">
<use xlink:href="#remove"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#search</p>
<div class="icon-wrapper">
<svg role="img" class="search">
<use xlink:href="#search"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-search" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-search')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-search')" for="toggle-search">Show</label>
</div>
<pre>
<code id="code-search"><svg role="img" class="search">
<use xlink:href="#search"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#server</p>
<div class="icon-wrapper">
<svg role="img" class="server">
<use xlink:href="#server"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-server" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-server')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-server')" for="toggle-server">Show</label>
</div>
<pre>
<code id="code-server"><svg role="img" class="server">
<use xlink:href="#server"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#settings</p>
<div class="icon-wrapper">
<svg role="img" class="settings">
<use xlink:href="#settings"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-settings" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-settings')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-settings')" for="toggle-settings">Show</label>
</div>
<pre>
<code id="code-settings"><svg role="img" class="settings">
<use xlink:href="#settings"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#share</p>
<div class="icon-wrapper">
<svg role="img" class="share">
<use xlink:href="#share"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-share" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-share')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-share')" for="toggle-share">Show</label>
</div>
<pre>
<code id="code-share"><svg role="img" class="share">
<use xlink:href="#share"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#star-outline</p>
<div class="icon-wrapper">
<svg role="img" class="star-outline">
<use xlink:href="#star-outline"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-star-outline" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-star-outline')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-star-outline')" for="toggle-star-outline">Show</label>
</div>
<pre>
<code id="code-star-outline"><svg role="img" class="star-outline">
<use xlink:href="#star-outline"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#star</p>
<div class="icon-wrapper">
<svg role="img" class="star">
<use xlink:href="#star"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-star" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-star')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-star')" for="toggle-star">Show</label>
</div>
<pre>
<code id="code-star"><svg role="img" class="star">
<use xlink:href="#star"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#sync</p>
<div class="icon-wrapper">
<svg role="img" class="sync">
<use xlink:href="#sync"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-sync" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-sync')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-sync')" for="toggle-sync">Show</label>
</div>
<pre>
<code id="code-sync"><svg role="img" class="sync">
<use xlink:href="#sync"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#thumb-down</p>
<div class="icon-wrapper">
<svg role="img" class="thumb-down">
<use xlink:href="#thumb-down"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-thumb-down" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-thumb-down')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-thumb-down')" for="toggle-thumb-down">Show</label>
</div>
<pre>
<code id="code-thumb-down"><svg role="img" class="thumb-down">
<use xlink:href="#thumb-down"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#thumb-up</p>
<div class="icon-wrapper">
<svg role="img" class="thumb-up">
<use xlink:href="#thumb-up"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-thumb-up" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-thumb-up')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-thumb-up')" for="toggle-thumb-up">Show</label>
</div>
<pre>
<code id="code-thumb-up"><svg role="img" class="thumb-up">
<use xlink:href="#thumb-up"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#twiiter</p>
<div class="icon-wrapper">
<svg role="img" class="twiiter">
<use xlink:href="#twiiter"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-twiiter" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-twiiter')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-twiiter')" for="toggle-twiiter">Show</label>
</div>
<pre>
<code id="code-twiiter"><svg role="img" class="twiiter">
<use xlink:href="#twiiter"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#view-headline</p>
<div class="icon-wrapper">
<svg role="img" class="view-headline">
<use xlink:href="#view-headline"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-view-headline" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-view-headline')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-view-headline')" for="toggle-view-headline">Show</label>
</div>
<pre>
<code id="code-view-headline"><svg role="img" class="view-headline">
<use xlink:href="#view-headline"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#view-list</p>
<div class="icon-wrapper">
<svg role="img" class="view-list">
<use xlink:href="#view-list"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-view-list" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-view-list')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-view-list')" for="toggle-view-list">Show</label>
</div>
<pre>
<code id="code-view-list"><svg role="img" class="view-list">
<use xlink:href="#view-list"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#view-module</p>
<div class="icon-wrapper">
<svg role="img" class="view-module">
<use xlink:href="#view-module"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-view-module" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-view-module')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-view-module')" for="toggle-view-module">Show</label>
</div>
<pre>
<code id="code-view-module"><svg role="img" class="view-module">
<use xlink:href="#view-module"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#warning-stop</p>
<div class="icon-wrapper">
<svg role="img" class="warning-stop">
<use xlink:href="#warning-stop"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-warning-stop" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-warning-stop')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-warning-stop')" for="toggle-warning-stop">Show</label>
</div>
<pre>
<code id="code-warning-stop"><svg role="img" class="warning-stop">
<use xlink:href="#warning-stop"></use>
</svg></code>
</pre>
</div>
</div>
<div class="icon">
<p>#warning</p>
<div class="icon-wrapper">
<svg role="img" class="warning">
<use xlink:href="#warning"></use>
</svg>
</div>
<div class="icon-dev">
<input class="show-code" id="toggle-warning" type="checkbox" />
<div class="icon-action">
<button onclick="gulpSvgSymbol.copy('code-warning')">Copy</button>
<label onclick="gulpSvgSymbol.reflow('code-warning')" for="toggle-warning">Show</label>
</div>
<pre>
<code id="code-warning"><svg role="img" class="warning">
<use xlink:href="#warning"></use>
</svg></code>
</pre>
</div>
</div>
</main>
<script type="text/javascript">
(function () {
// https://developers.google.com/web/updates/2015/04/cut-and-copy-commands
var symb = window.gulpSvgSymbol = {};
var main = document.getElementsByTagName('main')[0];
symb.copy = function (id) {
window.getSelection().removeAllRanges();
var code = document.getElementById(id);
var range = document.createRange();
range.selectNode(code);
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
} catch(err) {
console.log('Oops, unable to copy');
}
window.getSelection().removeAllRanges();
}
// Force a reflow so sizes are back to initials…
symb.reflow = function (id) {
var code = document.getElementById(id);
code.style.display = 'none';
window.setTimeout(function () {
code.style.display = '';
}, 0);
}
}());
</script>
</body>
</html>