<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
color: #666;
background: #fafafa;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.4
}
header {
display: block;
padding: 3em 3em 2em 3em;
background-color: #fff
}
header p {
margin: 0 0 0 0;
}
nav {
font-size: .7em;
display: block;
width: 100%;
margin: 0 0 2em 0
}
nav a {
display: inline-block;
text-decoration: none;
margin-left: 2em;
color: #0f7595;
white-space: nowrap
}
nav a:hover {
text-decoration: underline
}
nav a.current {
font-weight: bold;
text-decoration: underline;
color: #666
}
section {
border-top: 1px solid #eee;
padding: 2em 3em 0 3em
}
ul {
margin: 0;
padding: 0
}
.icon-box {
margin: 0;
width: 100%;
padding: 20px;
position: relative;
background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;
border: 1px solid #ccc;
display: inline-block;
vertical-align: middle;
text-align: center;
color: black;
}
.icon-box.inverted {
background: black;
}
.icon-wrapper {
width: 150px;
float: left;
}
.icon-snippet {
width: 100%;
overflow-x: scroll;
box-shadow: 0 0 1px grey inset;
text-align: center;
}
pre {
padding: 10px;
margin: 0;
}
h2 {
margin: 0;
padding: 5px 0;
font-size: 1em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
margin: 0;
}
footer {
display: block;
margin: 0;
padding: 0 3em 3em 3em
}
footer p {
margin: 0;
font-size: .7em
}
footer a {
color: #0f7595;
margin-left: 0
}
.icons {
padding: 50px 0;
max-width: 90%;
margin: 0 auto;
}
svg {
display: inline-block;
fill: currentColor !important;
vertical-align: middle;
max-width: 80%;
height: 80%;
}
</style>
</head>
<body>
<header>
<h1>Symbols</h1>
<p>Example usage:</p>
<pre><code><svg><use xlink:href="icons.svg#svg-logo"></use></svg></code></pre>
</header>
<main class="icons">
<div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-bin"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-bin</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-block"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-block</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-book"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-book</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-bug"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-bug</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-delete"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-delete</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-minus"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-minus</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-ok"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-ok</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-pause"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-pause</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-play"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-play</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-circle-plus"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-circle-plus</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-code"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-code</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-cog"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-cog</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-devices"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-devices</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-github"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-github</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-globe"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-globe</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-help"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-help</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-home"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-home</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-imac"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-imac</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-jh"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-jh</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-list"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-list</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-list2"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-list2</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-logo-word"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-logo-word</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-logo"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-logo</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-newtab"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-newtab</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-pen"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-pen</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-pencil"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-pencil</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-plug"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-plug</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-repeat"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-repeat</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-square-add"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-square-add</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-square-up"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-square-up</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-sync-browser"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-sync-browser</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-sync"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-sync</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-syncall"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-syncall</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-target"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-target</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-terminal"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-terminal</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-time"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-time</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-trash"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-trash</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-twitter"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-twitter</code></pre>
</div>
</div><div class="icon-wrapper">
<div class="icon-box">
<svg><use xlink:href="icons.svg#svg-wifi"></use></svg>
</div>
<div class="icon-snippet">
<pre><code>svg-wifi</code></pre>
</div>
</div>
</main>
</body>
</html>