HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<p>Based on <a href="https://codepen.io/chriscoyier/pen/LYPRKdE">https://codepen.io/chriscoyier/pen/LYPRKdE</a></p>
<p>Hover each svg to see its ID</p>
<svg width="0" height="0" display="none" id="sprite" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 32 32" id="truck" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4c0-.736.596-1.334 1.334-1.334h20c.736 0 1.332.598 1.332 1.334v17.334a1.334 1.334 0 0 1-1.332 1.332h-20A1.334 1.334 0 0 1 0 21.334V4zm2.666 1.334V20H20V5.334H2.666z" fill="var(--color-truck_body)"/>
<path d="M20 10.666c0-.736.596-1.332 1.334-1.332h5.332c.354 0 .694.14.944.39l4 4c.241.241.39.574.39.942v6.668a1.334 1.334 0 0 1-1.334 1.332h-9.332A1.334 1.334 0 0 1 20 21.334V10.666zM22.666 12v8h6.668v-4.78L26.114 12h-3.448z" fill="var(--color-truck_cab)"/>
<path d="M24.666 29.334a4.667 4.667 0 0 0 0-9.334 4.667 4.667 0 0 0 0 9.334zm0-2.668a2 2 0 1 1 0-4 2 2 0 1 1 0 4z M7.334 29.334a4.667 4.667 0 0 0 0-9.334 4.667 4.667 0 0 0 0 9.334zm0-2.668a2 2 0 1 1 0-4 2 2 0 1 1 0 4z" fill="var(--color-truck_wheels)"/>
</symbol>
<symbol id="activity" viewBox="0 0 172.6 189.1"><path d="M-1-1h582v402H-1z" fill="none"/><path d="M172.142 144.3c.607-12.6-3.545-23-11.648-32.1-12.56-14.2-19.852-30.7-21.979-49.5-.81-6.8-.608-13.8-1.823-20.5-4.76-27.3-30.79-44.7-57.226-41.3-21.574 2.8-41.02 21-43.654 42.2-.81 7.3-.81 14.7-1.823 21.9-2.735 18.7-10.736 35.1-23.397 49.3-7.596 8.5-10.736 18.6-9.825 30z" fill="#fff"/><path d="M172.142 144.3H.767c-.911-11.4 2.229-21.5 9.825-30 12.56-14.2 20.662-30.6 23.397-49.3 1.013-7.3 1.013-14.7 1.924-21.9C38.445 21.9 57.993 3.7 79.466.9c26.435-3.4 52.364 14 57.125 41.3 1.215 6.7 1.012 13.7 1.823 20.5 2.127 18.7 9.52 35.3 21.979 49.5 8.204 9.2 12.255 19.5 11.749 32.1zM65.2 161.8c-.609 2.1-.811 4.4-.71 6.7.608 10.6 9.217 19.3 19.953 19.9 12.459.8 22.688-9 22.688-21.1 0-1.9-.202-3.7-.709-5.4-.405-1.6-1.924-2.7-3.545-2.7H68.744c-1.62 0-3.14 1.1-3.545 2.6z"/></symbol>
<symbol id="arrow-circle-right" viewBox="-137.8 144.15 30.2 27.5"><path d="M-108.3 159.8c.1-.1.1-.1.1-.2 0 0 0-.1.1-.1.3-.4.5-.9.5-1.5s-.2-1.1-.5-1.5v-.1l-.1-.1c0-.1-.1-.1-.1-.2l-11.2-11.2c-1-1-2.6-1-3.6 0s-1 2.6 0 3.6l6.9 6.9h-19.1c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5h19.1l-6.9 6.9c-1 1-1 2.6 0 3.6s2.6 1 3.6 0l11.2-11.1z"/></symbol>
<symbol id="arrow-down-mini" viewBox="-122.9 121.1 105.9 61.9"><path d="M-63.2 180.3l43.5-43.5c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.7L-69.9 161l-37.2-37.2c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.6c-1.9 1.8-2.8 4.2-2.8 6.6 0 2.3.9 4.6 2.6 6.5 11.4 11.5 41 41.2 43 43.3l.2.2c3.6 3.6 10.3 3.6 13.9 0z"/></symbol>
<symbol id="arrow-left-mini" viewBox="-100.9 99.1 61.9 105.9"><path d="M-98.2 158.8l43.5 43.5c1.7 1.7 4 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.7-6.5l-37.2-37.2 37.2-37.2c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.6-6.5c-1.8-1.9-4.2-2.8-6.6-2.8-2.3 0-4.6.9-6.5 2.6-11.5 11.4-41.2 41-43.3 43l-.2.2c-3.6 3.6-3.6 10.3 0 13.9z"/></symbol>
<symbol id="arrow-right-mini" viewBox="-100.9 99.1 61.9 105.9"><path d="M-41.7 145.3l-43.5-43.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.7c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.7 6.5L-61 152l-37.2 37.2c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.6 6.5c1.8 1.9 4.2 2.8 6.6 2.8 2.3 0 4.6-.9 6.5-2.6 11.5-11.4 41.2-41 43.3-43l.2-.2c3.6-3.6 3.6-10.4 0-13.9z"/></symbol>
<symbol id="blog" viewBox="0 0 49 88"><g fill="none" stroke="#00c1ff" stroke-linecap="round"><path d="M25.986 30.5h6M26 36.5h13m-15 10h13m-12 13h14m-14 7h14m-15 13h14M23 73h11m-9-20h7" stroke-width="3"/><g stroke-linejoin="round" stroke-width="4"><path d="M16 23h27c2 4.73 3 9.059 3 12.984 0 5.889-2 5.5-2 11.711s2 6.974 2 13.463c0 6.49-2 6.584-2 13.006 0 4.281 1 8.227 3 11.836H20c-2-3.558-3-7.503-3-11.836 0-6.499 2-6.761 2-13.006s-2-7.587-2-13.463c0-5.875 2.269-5.08 2-11.71-.179-4.421-1.179-8.75-3-12.985z"/><path d="M11.603 65H6c-2-4.73-3-9.059-3-12.984 0-5.889 2-5.5 2-11.711S3 33.33 3 26.842c0-6.49 2-6.584 2-13.006C5 9.555 4 5.609 2 2h27c2 3.558 3 7.503 3 11.836 0 1.223-.07 1.224-.186 2.087"/></g></g></symbol>
<symbol id="bold" viewBox="0 0 8 8"><path d="M0 0v1c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1v1h5.5A2.5 2.5 0 0 0 8 5.5c0-1-.59-1.85-1.44-2.25A2 2 0 0 0 5 0H0zm3 1h1c.55 0 1 .45 1 1s-.45 1-1 1H3V1zm0 3h1.5C5.33 4 6 4.67 6 5.5S5.33 7 4.5 7H3V4z"/></symbol>
<symbol id="branch" viewBox="0 0 100 100"><path d="M84.339 62.504a15.805 15.805 0 0 0-11.313 4.721 40.187 40.187 0 0 1-1.578-1.572c-6.965-7.211-14.451-19.189-22.311-29.678-7.977-10.209-16.196-20.413-29.012-20.906H0v14.37h20.126c2.555-.111 6.556 1.993 11.208 6.914 6.961 7.197 14.454 19.171 22.315 29.662 4.822 6.164 9.759 12.293 15.741 16.289 1.99 6.191 7.93 10.688 14.949 10.688 8.648 0 15.661-6.824 15.661-15.244s-7.013-15.244-15.661-15.244zM51.541 29.438h18.986c2.637 4.795 7.831 8.059 13.811 8.059 8.648 0 15.661-6.824 15.661-15.243S92.986 7.01 84.338 7.01c-5.979 0-11.174 3.264-13.811 8.058H36.3c6.007 3.551 10.861 8.924 15.241 14.37z"/></symbol>
<symbol id="check" viewBox="0 0 100 100"><path d="M34.357 91.176L0 56.604 16.687 39.81l18.157 18.264 48.954-49.25L100 25.125 34.357 91.176z"/></symbol>
<symbol id="cloud" viewBox="0 0 100 100"><path d="M84.187 44.046c.084-.753.114-1.52.114-2.289 0-13.402-10.814-24.257-24.154-24.257-10.354 0-19.161 6.551-22.599 15.754-2.274-2.508-5.521-4.111-9.166-4.111-6.872 0-12.439 5.59-12.439 12.493 0 .816.084 1.606.239 2.38C7.014 45.534 0 53.472 0 63.095 0 73.824 8.648 82.5 19.323 82.5h61.354C91.351 82.5 100 73.824 100 63.095c0-9.505-6.823-17.38-15.813-19.049z"/></symbol>
<symbol id="code" viewBox="0 0 100 100"><path d="M28.871 21.5L0 50.004 28.874 78.5l10.497-10.349-18.373-18.147 18.373-18.13-10.5-10.374zm42.258 0L60.633 31.865l18.378 18.131-18.378 18.126 10.496 10.365L100 49.974 71.129 21.5z"/></symbol>
<symbol id="codepen-box" viewBox="0 0 100 100"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"/></symbol>
<symbol id="comment" viewBox="-405.9 238 56.3 54.8"><path d="M-391 291.4c0 1.5 1.2 1.7 1.9 1.2 1.8-1.6 15.9-14.6 15.9-14.6h19.3c3.8 0 4.4-.8 4.4-4.5v-31.1c0-3.7-.8-4.5-4.4-4.5h-47.4c-3.6 0-4.4.9-4.4 4.5v31.1c0 3.7.7 4.4 4.4 4.4h10.4v13.5z"/></symbol>
<symbol id="css" viewBox="0 0 51.35 33.95"><path d="M12.66 33.95c-4.49 0-6.93-2.22-6.93-5.6 0-2 .6-3.72.6-5.52 0-2.78-1.71-3.68-4.75-3.68h-.9L0 14.75h1.58c3 0 4.75-.9 4.75-3.63 0-1.84-.6-3.55-.6-5.51C5.73 2.22 8.17 0 12.66 0h7.1v4.4h-3.51c-2 0-2.95.81-2.95 2.35 0 1.71.56 2.82.56 4.75 0 3-1.75 4.7-5.13 5.43V17c3.38.73 5.13 2.39 5.13 5.43 0 1.88-.56 3-.56 4.75 0 1.5.94 2.31 2.95 2.31h3l.75 4.46h-7.34zM49.77 19.15c-3 0-4.75.9-4.75 3.68 0 1.8.6 3.51.6 5.52 0 3.38-2.39 5.6-6.93 5.6H31.6V29.5h3.55c2 0 3-.81 3-2.31 0-1.71-.6-2.86-.6-4.75 0-3 1.75-4.7 5.13-5.43v-.08c-3.38-.73-5.13-2.39-5.13-5.43 0-1.92.6-3 .6-4.75 0-1.54-1-2.35-3-2.35h-3L31.43 0h7.27c4.53 0 6.93 2.22 6.93 5.6 0 2-.6 3.68-.6 5.51 0 2.74 1.71 3.63 4.75 3.63h.9l.68 4.4h-1.59z"/></symbol>
<symbol id="dev" viewBox="0 0 200 200"><path d="M188 0H12A12 12 0 0 0 0 12v176a12 12 0 0 0 12 12h176a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12zM57.64 134.55C52.72 140.9 46 143 29.79 143H15.15V60.06h15.54C49 60.06 54.4 62 59.32 70c2.85 4.67 3.11 6.48 3.5 28.25.52 24.64-.26 30.08-5.18 36.3zm56-60.24H86.4v19.43h16.84v14.12l-8 .39-8.16.39v19.43l13.34.39 13.21.39V143H96.11c-17 0-17.74-.13-20.72-3.24l-3.24-3.11v-34.88c0-33.29.13-35 2.72-38.34s2.72-3.37 20.73-3.37h18zm51.56 60c-1.81 4.66-7 8.68-11 8.68-1.94 0-4.92-1.69-7.38-4.28-3.5-3.49-4.93-7-9.07-22.93-2.72-10.36-7.13-27.07-9.85-37.3l-4.92-18.4h8.29c4.53 0 8.29.26 8.29.52 0 .65 12.83 50 13.86 53.24.52 1.69 3.5-7.64 8-25.26l7.26-27.85 8.16-.39c4.4-.26 8 0 8 .39.01 1.53-18.38 70.19-19.68 73.56z"/><path d="M45.07 76.77c-2.07-1.68-5-2.46-9.32-2.46H29.4l.26 26.82.39 26.94 6.21-.13c4.54 0 6.87-.78 9.07-2.85 2.72-2.72 2.85-4 2.85-24.35 0-20.99-.13-21.51-3.11-23.97z"/></symbol>
<symbol id="double-quote-sans-left" viewBox="0 0 8 8"><path d="M0 1v6l3-3V1H0zm5 0v6l3-3V1H5z"/></symbol>
<symbol id="drag-handle" viewBox="0 0 17 20"><path d="M1.5 3a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 0 1 0-3h17a1.5 1.5 0 0 1 0 3z"/></symbol>
<symbol id="edit" viewBox="0 0 100 100"><path d="M24.56 92.536L0 100l7.453-24.583c6.356-.244 17.322 10.792 17.107 17.119zM96.617 32.082l-.475.471L67.383 3.766l.472-.472c12.927-12.94 42.016 15.517 28.762 28.788zM61.64 9.516l28.758 28.785-46.303 46.345c-1.222 1.221-2.234.884-2.234.884l2.314-15.356-14.454.074.072-14.468-15.342 2.312s-.34-1.011.883-2.234L61.64 9.516z"/></symbol>
<symbol id="ellipse" viewBox="0 0 29 7"><circle cx="3.5" cy="3.5" r="3.5"/><circle cx="14.5" cy="3.5" r="3.5"/><circle cx="25.5" cy="3.5" r="3.5"/></symbol>
<symbol id="embed-badge" viewBox="0 0 23 17"><path d="M21 0H2C.9 0 0 .9 0 2v13c0 1.1.9 2 2 2h19c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM7.732 6.95a.473.473 0 0 1-.072.256.582.582 0 0 1-.228.2l-1.704.919a2.047 2.047 0 0 1-.33.14 5.458 5.458 0 0 1-.366.106 9.7 9.7 0 0 1 .366.099c.116.034.226.079.33.135l1.704.924c.104.055.18.122.228.198a.46.46 0 0 1 .072.252v1.29L2.872 8.93v-.726l4.86-2.544v1.29zm2.94 5.593a1.078 1.078 0 0 1-.405.497 1.045 1.045 0 0 1-.567.169h-.792l3.408-8.946a.959.959 0 0 1 .366-.468c.164-.108.355-.162.57-.162h.793l-3.374 8.91zm9.36-3.612l-4.86 2.538v-1.29c0-.092.023-.176.071-.252a.594.594 0 0 1 .229-.198l1.704-.924c.1-.056.209-.101.327-.135.117-.034.24-.067.368-.1a5.692 5.692 0 0 1-.368-.104 1.772 1.772 0 0 1-.327-.141l-1.704-.918a.587.587 0 0 1-.229-.201.476.476 0 0 1-.071-.255V5.66l4.86 2.544v.726z"/></symbol>
<symbol id="eye" viewBox="0 0 30.5 16.5"><path d="M15.3 0C8.9 0 3.3 3.3 0 8.3c3.3 5 8.9 8.3 15.3 8.3s12-3.3 15.3-8.3C27.3 3.3 21.7 0 15.3 0zm0 14.5c-3.4 0-6.2-2.8-6.2-6.2C9 4.8 11.8 2 15.3 2c3.4 0 6.2 2.8 6.2 6.2 0 3.5-2.8 6.3-6.2 6.3z"/></symbol>
<symbol id="facebook" viewBox="-574 359 75 75"><path d="M-511.499 359h-50c-6.875 0-12.501 5.626-12.501 12.502v49.997c0 6.88 5.626 12.501 12.501 12.501h50c6.876 0 12.499-5.621 12.499-12.502v-49.996c0-6.876-5.624-12.502-12.499-12.502zm1.263 37.5h-12.201v32.813H-536.5V396.5h-6.777v-10.735h6.777v-6.972c0-9.473 4.086-15.105 15.225-15.105h12.835v11.614h-10.483c-3.111-.005-3.497 1.622-3.497 4.652l-.017 5.811h14.063l-1.862 10.735z"/></symbol>
<symbol id="file-audio" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#4DB0D4" width="15" height="15" rx="4"/><path d="M4.744 4.929a.756.756 0 0 1-.37.097H2.757A.756.756 0 0 0 2 5.783v3.308c0 .418.339.756.757.756h1.617c.129 0 .257.034.37.098l2.128 1.196A.757.757 0 0 0 8 10.482v-6.09a.757.757 0 0 0-1.128-.66L4.744 4.93zm4.802-.502c0-.189.172-.331.358-.297 1.274.237 2.229 1.613 2.229 3.241 0 1.628-.955 3.004-2.229 3.241a.303.303 0 0 1-.358-.297.3.3 0 0 1 .245-.295c.998-.18 1.738-1.317 1.738-2.649s-.74-2.468-1.738-2.648a.3.3 0 0 1-.245-.296z" fill="#282828"/></g></symbol>
<symbol id="file-binary" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#E6DA54" width="15" height="15" rx="4"/><path d="M11 4h1v1h-1V4zM9 6h1v1H9V6zm0-2h1v1H9V4zm2 2h1v1h-1V6zm-1-1h1v1h-1V5zM4 5h1v1H4V5zm1-1h1v1H5V4zm0 7h1v1H5v-1zm4 0h1v1H9v-1zM3 6h1v1H3V6zm2 0h1v1H5V6zM3 4h1v1H3V4zm2 6h5v1H5v-1z" fill="#000"/></g></symbol>
<symbol id="file-css" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#0EBEFF" width="15" height="15" rx="4"/><path d="M8 8.366l1.845 1.065a.507.507 0 0 0 .686-.181.507.507 0 0 0-.186-.685L8.5 7.5l1.845-1.065a.507.507 0 0 0 .186-.685.507.507 0 0 0-.686-.181L8 6.634v-2.13A.507.507 0 0 0 7.5 4c-.268 0-.5.225-.5.503v2.131L5.155 5.569a.507.507 0 0 0-.686.181.507.507 0 0 0 .186.685L6.5 7.5 4.655 8.565a.507.507 0 0 0-.186.685c.134.232.445.32.686.181L7 8.366v2.13c0 .271.224.504.5.504.268 0 .5-.225.5-.503V8.366z" fill="#282828"/></g></symbol>
<symbol id="file-generic" viewBox="0 0 15 15"><rect width="15" height="15" rx="4" ry="4" fill="#78b078"/><path d="M3 2h9v11H3z" fill="none" stroke="#282828"/><path d="M5 4h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm0 2h5v1H5z" fill="#257925"/></symbol>
<symbol id="file-html" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#FF3C41" width="15" height="15" rx="4"/><path d="M10.97 2.29a.563.563 0 0 0-.495-.29.572.572 0 0 0-.488.277l-5.905 9.86a.565.565 0 0 0-.007.574c.102.18.287.289.495.289a.572.572 0 0 0 .488-.277l5.905-9.86a.565.565 0 0 0 .007-.574" fill="#28282B"/></g></symbol>
<symbol id="file-image" viewBox="0 0 20 20"><rect fill="#fcd000" height="20" rx="2" width="20"/><g stroke="#000" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V4h4m0 12H4v-4m12 0v4h-4m0-12h4v4" stroke-width="2"/><path d="M7.5 9.5v-2h2m0 5h-2v-2m5-1v-2h-2m0 5h2v-2"/></g></symbol>
<symbol id="file-js" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#FCD000" width="15" height="15" rx="4"/><path d="M6.554 3.705a.55.55 0 0 1-.452.543c-1.2.217-2.12 1.61-2.12 3.275 0 1.665.92 3.057 2.12 3.274a.554.554 0 0 1-.205 1.087c-1.733-.322-3.022-2.175-3.022-4.361 0-2.187 1.289-4.04 3.022-4.362a.554.554 0 0 1 .657.544zm1.892 0c0-.347.316-.607.657-.544 1.733.322 3.022 2.175 3.022 4.362 0 2.186-1.289 4.04-3.022 4.361a.554.554 0 0 1-.205-1.087c1.2-.217 2.12-1.61 2.12-3.274 0-1.665-.92-3.058-2.12-3.275a.551.551 0 0 1-.452-.543z" fill="#282828"/></g></symbol>
<symbol id="file-svg" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#AE63E4" width="15" height="15" rx="4"/><path d="M3.5 11.5l2-2m4-4l2-2" stroke="#282828" fill="#000"/><circle fill="#282828" cx="3" cy="12" r="1.5"/><circle fill="#282828" cx="12" cy="3" r="1.5"/><circle stroke="#282828" cx="7.5" cy="7.5" r="2.5"/></g></symbol>
<symbol id="file-text" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#47CF73" width="15" height="15" rx="4"/><path fill="#282828" d="M3 3v1h1v2h1V4h1V3z"/><path fill="#1A9C2C" d="M7 3h5v1H7zm0 2h5v1H7zM3 7h9v1H3zm0 2h9v1H3zm0 2h9v1H3z"/></g></symbol>
<symbol id="file-unsupported" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#E6DA54" width="15" height="15" rx="4"/><path d="M11 4h1v1h-1V4zM9 6h1v1H9V6zm0-2h1v1H9V4zm2 2h1v1h-1V6zm-1-1h1v1h-1V5zM4 5h1v1H4V5zm1-1h1v1H5V4zm0 7h1v1H5v-1zm4 0h1v1H9v-1zM3 6h1v1H3V6zm2 0h1v1H5V6zM3 4h1v1H3V4zm2 6h5v1H5v-1z" fill="#000"/></g></symbol>
<symbol id="file-video" viewBox="0 0 15 15"><g fill="none" fill-rule="evenodd"><rect fill="#F52C75" width="15" height="15" rx="4"/><path d="M12.177 6.972L4.943 3.08C4.521 2.851 4 3.144 4 3.607v7.786c0 .464.521.756.943.528l7.234-3.893a.593.593 0 0 0 0-1.056" fill="#282828"/></g></symbol>
<symbol id="folder" viewBox="0 0 21 15"><path d="M2.004 14.458A1.88 1.88 0 0 1 .125 12.58V1.31C.125.655.656.124 1.31.124h4.964c.452 0 .858.25 1.06.655l.317.635c.245.49.736.793 1.283.793h9.896a1.88 1.88 0 0 1 1.878 1.879v8.493a1.88 1.88 0 0 1-1.878 1.878H2.004z" fill="#CBCBCB"/><path class="folder-front" d="M2.004 14.458A1.88 1.88 0 0 1 .125 12.58V4.087a1.88 1.88 0 0 1 1.879-1.879H18.83a1.88 1.88 0 0 1 1.878 1.879v8.493a1.88 1.88 0 0 1-1.878 1.878H2.004z" fill="#828282"/></symbol>
<symbol id="gear" viewBox="0 0 100 100"><path d="M87.687 45.077c-.313-2.433-.816-4.807-1.542-7.079l8.145-11.73-5.827-7.515-.094-.123-5.824-7.514-12.955 5.577c-2.041-1.265-4.192-2.362-6.459-3.219L59.42 0H40.586l-3.709 13.474c-2.27.857-4.421 1.955-6.463 3.222l-12.957-5.577-5.825 7.514-.097.124-5.822 7.517 8.146 11.731a39.832 39.832 0 0 0-1.544 7.079L0 52.032l2.08 9.375.033.15 2.08 9.375 14.001.761a39.157 39.157 0 0 0 4.4 5.668l-2.396 14.227 8.416 4.173.138.067L37.169 100l9.309-10.796c1.161.109 2.335.173 3.524.173s2.358-.074 3.52-.184l9.317 10.804 8.415-4.173.141-.066 8.413-4.172-2.396-14.228a39.06 39.06 0 0 0 4.4-5.672l14-.759 2.078-9.375.035-.154L100 52.025l-12.313-6.948zM50.003 34.51c8.435 0 15.272 7.035 15.272 15.719 0 8.679-6.839 15.717-15.272 15.717-8.436 0-15.272-7.038-15.272-15.717 0-8.684 6.838-15.719 15.272-15.719z"/></symbol>
<symbol id="github" viewBox="-561 347 100 100"><path d="M-561 401.337c0 4.531.424 8.631 1.272 12.298.847 3.667 2.021 6.854 3.521 9.56s3.407 5.086 5.721 7.139a32.693 32.693 0 0 0 7.53 5.037c2.706 1.304 5.795 2.363 9.266 3.178a76.523 76.523 0 0 0 10.636 1.712c3.619.326 7.596.489 11.931.489 4.368 0 8.362-.163 11.98-.489 3.619-.326 7.172-.897 10.66-1.712s6.593-1.874 9.315-3.178 5.249-2.983 7.58-5.037a27.121 27.121 0 0 0 5.77-7.139c1.516-2.705 2.697-5.892 3.545-9.56.848-3.668 1.271-7.767 1.271-12.298 0-8.085-2.706-15.078-8.117-20.978.293-.782.562-1.671.807-2.665s.473-2.412.685-4.254c.212-1.842.13-3.969-.245-6.381-.375-2.413-1.068-4.874-2.079-7.384l-.733-.147c-.522-.098-1.378-.073-2.567.073-1.189.146-2.575.44-4.156.88-1.581.44-3.619 1.288-6.112 2.543-2.494 1.255-5.126 2.828-7.897 4.719-4.759-1.304-11.296-1.956-19.609-1.956-8.28 0-14.8.652-19.56 1.956-2.771-1.891-5.42-3.464-7.946-4.719-2.526-1.255-4.539-2.103-6.039-2.543-1.499-.44-2.901-.725-4.205-.856-1.304-.13-2.127-.171-2.47-.122a4.87 4.87 0 0 0-.807.171c-1.011 2.51-1.703 4.971-2.078 7.384-.375 2.412-.456 4.54-.245 6.381.212 1.842.44 3.26.685 4.254.245.994.513 1.883.807 2.665-5.412 5.901-8.117 12.893-8.117 20.978v.001zm12.274 12.274c0-4.694 2.135-8.998 6.406-12.91 1.271-1.174 2.755-2.062 4.45-2.665 1.695-.603 3.61-.945 5.746-1.027a63.936 63.936 0 0 1 6.137.049c1.956.114 4.368.269 7.237.464 2.869.196 5.346.293 7.433.293 2.087 0 4.564-.098 7.433-.293a742.02 742.02 0 0 1 7.237-.464 63.932 63.932 0 0 1 6.137-.049c2.135.082 4.05.424 5.746 1.027 1.695.603 3.178 1.491 4.45 2.665 4.271 3.847 6.406 8.15 6.406 12.91 0 2.804-.351 5.289-1.052 7.457-.701 2.168-1.597 3.985-2.69 5.452-1.092 1.467-2.608 2.714-4.548 3.741-1.94 1.027-3.83 1.817-5.672 2.372-1.842.554-4.206.986-7.091 1.296s-5.461.497-7.726.562c-2.266.065-5.143.098-8.631.098-3.488 0-6.365-.033-8.631-.098s-4.841-.253-7.726-.562c-2.885-.31-5.248-.742-7.09-1.296-1.842-.554-3.733-1.345-5.672-2.372-1.94-1.027-3.456-2.274-4.548-3.741s-1.989-3.284-2.689-5.452c-.701-2.168-1.051-4.654-1.051-7.457h-.001zm50.226-.986c0-5.178 2.798-9.375 6.25-9.375s6.25 4.197 6.25 9.375-2.798 9.375-6.25 9.375-6.25-4.197-6.25-9.375zm-37.5 0c0-5.178 2.798-9.375 6.25-9.375s6.25 4.197 6.25 9.375-2.798 9.375-6.25 9.375-6.25-4.197-6.25-9.375z"/></symbol>
<symbol id="google-plus" viewBox="-600 386 22 22"><path d="M-581.663 386h-14.701c-2.022 0-3.636 1.671-3.636 3.693v14.617c0 2.072 1.614 3.69 3.636 3.69h14.701a3.656 3.656 0 0 0 3.663-3.69v-14.617c0-2.022-1.641-3.693-3.663-3.693zm-3.212.688v3.438h-3.438v-3.438h3.438zm-4.812 0v3.438h-3.438v-3.438h3.438zm-9.625 3.437v-.432c0-1.657 1.323-3.005 2.949-3.005h1.864v3.438h-4.813v-.001zm15.812 9.625h-4.125v4.125h-2.75v-4.125h-4.125V397h4.125v-4.125h2.75V397h4.125v2.75zm4.813-9.625h-4.813v-3.438h1.837c1.641 0 2.975 1.348 2.975 3.005v.432l.001.001z"/></symbol>
<symbol id="grid-12" viewBox="-60.741 20.407 74.148 101.398"><path d="M-47.704 20.407h-8.666a4.332 4.332 0 0 0-4.37 4.37v8.742c0 2.37 1.925 4.37 4.37 4.37h8.74c2.37 0 4.37-1.926 4.37-4.37v-8.741c-.073-2.445-2-4.37-4.444-4.37zm0 28.297h-8.666c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.925 4.371 4.37 4.371h8.74c2.37 0 4.37-1.926 4.37-4.37v-8.74c-.073-2.371-2-4.371-4.444-4.371zm0 28.37h-8.666c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.925 4.37 4.37 4.37h8.74c2.37 0 4.37-1.925 4.37-4.37v-8.74c-.073-2.445-2-4.37-4.444-4.37zm28.37-56.667h-8.74c-2.37 0-4.37 1.926-4.37 4.37v8.742c0 2.37 1.925 4.37 4.37 4.37h8.74c2.371 0 4.371-1.926 4.371-4.37v-8.741c0-2.445-2-4.37-4.37-4.37zm0 28.297h-8.74c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.925 4.371 4.37 4.371h8.74c2.371 0 4.371-1.926 4.371-4.37v-8.74c0-2.371-2-4.371-4.37-4.371zm0 28.37h-8.74c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.925 4.37 4.37 4.37h8.74c2.371 0 4.371-1.925 4.371-4.37v-8.74c0-2.445-2-4.37-4.37-4.37zM8.964 20.407H.296c-2.37 0-4.37 1.926-4.37 4.37v8.742c0 2.37 1.926 4.37 4.37 4.37h8.741c2.37 0 4.37-1.926 4.37-4.37v-8.741c-.074-2.445-2-4.37-4.444-4.37zm0 28.297H.296c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.926 4.371 4.37 4.371h8.741c2.37 0 4.37-1.926 4.37-4.37v-8.74c-.074-2.371-2-4.371-4.444-4.371zm0 28.37H.296c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.926 4.37 4.37 4.37h8.741c2.37 0 4.37-1.925 4.37-4.37v-8.74c-.074-2.445-2-4.37-4.444-4.37zm-56.667 27.25h-8.666c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.925 4.37 4.37 4.37h8.74c2.37 0 4.37-1.925 4.37-4.37v-8.74c-.073-2.445-2-4.37-4.444-4.37zm28.37 0h-8.74c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.925 4.37 4.37 4.37h8.74c2.371 0 4.371-1.925 4.371-4.37v-8.74c0-2.445-2-4.37-4.37-4.37zm28.297 0H.296c-2.37 0-4.37 1.926-4.37 4.37v8.741c0 2.37 1.926 4.37 4.37 4.37h8.741c2.37 0 4.37-1.925 4.37-4.37v-8.74c-.074-2.445-2-4.37-4.444-4.37z"/></symbol>
<symbol id="grid-6" viewBox="-60.741 20.407 74.148 45.778"><path d="M-47.704 20.407h-8.666a4.332 4.332 0 0 0-4.37 4.37v8.742c0 2.37 1.925 4.37 4.37 4.37h8.74c2.37 0 4.37-1.926 4.37-4.37v-8.741c-.073-2.445-2-4.37-4.444-4.37zM-47.704 48.704h-8.666c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.925 4.371 4.37 4.371h8.74c2.37 0 4.37-1.926 4.37-4.37v-8.74c-.073-2.371-2-4.371-4.444-4.371zM-19.333 20.407h-8.741c-2.37 0-4.37 1.926-4.37 4.37v8.742c0 2.37 1.925 4.37 4.37 4.37h8.74c2.371 0 4.371-1.926 4.371-4.37v-8.741c0-2.445-2-4.37-4.37-4.37zM-19.333 48.704h-8.741c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.925 4.371 4.37 4.371h8.74c2.371 0 4.371-1.926 4.371-4.37v-8.74c0-2.371-2-4.371-4.37-4.371zM8.963 20.407H.296c-2.37 0-4.37 1.926-4.37 4.37v8.742c0 2.37 1.926 4.37 4.37 4.37h8.741c2.37 0 4.37-1.926 4.37-4.37v-8.741c-.074-2.445-2-4.37-4.444-4.37zM8.963 48.704H.296c-2.37 0-4.37 1.926-4.37 4.37v8.74c0 2.371 1.926 4.371 4.37 4.371h8.741c2.37 0 4.37-1.926 4.37-4.37v-8.74c-.074-2.371-2-4.371-4.444-4.371z"/></symbol>
<symbol id="grid" viewBox="0 0 100 100"><path d="M0 0h23.81v23.81H0zM38.095 0h23.809v23.81H38.095zM76.19 0H100v23.81H76.19zM0 38.095h23.81v23.809H0zM38.095 38.095h23.809v23.809H38.095zM76.19 38.095H100v23.809H76.19zM0 76.19h23.81V100H0zM38.095 76.19h23.809V100H38.095zM76.19 76.19H100V100H76.19z"/></symbol>
<symbol id="header" viewBox="0 0 8 8"><path d="M0 0v1.14h.57a.57.57 0 0 1 .57.57v4.58a.57.57 0 0 1-.57.57H0V8h3.43V6.86h-.57a.57.57 0 0 1-.57-.57V4.57h3.42v1.72a.57.57 0 0 1-.57.57h-.57V8H8V6.86h-.57a.57.57 0 0 1-.57-.57V1.71a.57.57 0 0 1 .57-.57H8V0H4.57v1.14h.57a.57.57 0 0 1 .57.57v1.72H2.29V1.71a.57.57 0 0 1 .57-.57h.57V0H0z"/></symbol>
<symbol id="heart" viewBox="0 0 100 92"><path d="M85.24 2.67C72.29-3.08 55.75 2.67 50 14.9 44.25 2 27-3.8 14.76 2.67 1.1 9.14-5.37 25 5.42 44.38 13.33 58 27 68.11 50 86.81 73.73 68.11 87.39 58 94.58 44.38c10.79-18.7 4.32-35.24-9.34-41.71z"/></symbol>
<symbol id="help" viewBox="0 0 100 100"><path d="M75 0H25C11.19 0 0 11.193 0 25v50c0 13.802 11.19 25 25 25h50c13.811 0 25-11.198 25-25V25c0-13.807-11.189-25-25-25zM57.203 85.067H41.504V72.542h15.699v12.525zm16.154-43.026c-.84 2.066-1.873 3.834-3.102 5.298a20.59 20.59 0 0 1-4.101 3.751 91.479 91.479 0 0 0-4.249 3.101c-1.333 1.034-1.553 2.214-2.596 3.547-1.025 1.335-.977 3.004-.977 5.006v3.924H41.668v-4.623c0-2.864 1.366-5.265 2.27-7.202.896-1.935 2.255-3.581 3.459-4.947 1.196-1.367 2.62-2.556 3.955-3.557 1.327-.993 2.637-1.993 3.776-2.995 1.123-1.001 2.083-2.1 2.783-3.304.7-1.197 1.043-2.694.977-4.5 0-3.06-.74-5.33-2.245-6.795-1.498-1.465-3.582-2.206-6.25-2.206-1.8 0-3.337.351-4.639 1.05a9.172 9.172 0 0 0-3.199 2.808c-.837 1.163-1.448 3.593-1.847 5.156-.407 1.57-.602 6.115-.602 6.115H25.399c.073-8.333.684-7.963 1.855-10.965 1.164-2.995 2.8-6.132 4.899-8.33 2.099-2.197 4.63-4.179 7.601-5.417a25.782 25.782 0 0 1 9.945-1.977c4.736 0 8.683.581 11.856 1.876 3.167 1.302 5.713 2.889 7.65 4.817 1.929 1.937 3.312 4.004 4.149 6.234.831 2.237 1.245 4.313 1.245 6.242.002 3.206-.412 5.827-1.242 7.893z"/></symbol>
<symbol id="html" viewBox="0 0 53.06 34.99"><path d="M51.84 20.73c-.09 0-.09.09 0 0l-13 13a4.46 4.46 0 0 1-6.31-6.31l9.76-9.76-9.8-9.89a4.46 4.46 0 1 1 6.31-6.31l12.87 12.88a.08.08 0 0 1 .09.09A4.38 4.38 0 0 1 53 16.76a.65.65 0 0 0 .09.43v.35a4 4 0 0 1-1.25 3.19zm-39.92-2.16l8.81 8.81a4.46 4.46 0 1 1-6.31 6.31L1.55 20.82s-.17 0-.17-.09A3.71 3.71 0 0 1 0 18.4c0-.26.09-.52.09-.86a4.67 4.67 0 0 1 1.38-3.19.08.08 0 0 0 .09-.09l13-13a4.46 4.46 0 1 1 6.26 6.34L11 17.62z"/></symbol>
<symbol id="icon-new-collection" viewBox="0 0 20 20"><rect y="10.36" width="9.64" height="9.64" rx="1" ry="1"/><rect x="10.36" y="10.36" width="9.64" height="9.64" rx="1" ry="1"/><rect width="9.64" height="9.64" rx="1" ry="1"/><rect x="10.36" width="9.64" height="9.64" rx="1" ry="1"/></symbol>
<symbol id="icon-new-pen" viewBox="0 0 20 20"><path d="M0 9.002C0 8.45.455 8 .992 8h18.016c.548 0 .992.456.992 1.002v9.996c0 .553-.455 1.002-.992 1.002H.992C.444 20 0 19.544 0 18.998V9.002zm0-8C0 .45.451 0 .99 0h4.02A.99.99 0 0 1 6 1.003v4.994C6 6.551 5.549 7 5.01 7H.99A.99.99 0 0 1 0 5.997V1.003zm7 0C7 .45 7.451 0 7.99 0h4.02A.99.99 0 0 1 13 1.003v4.994C13 6.551 12.549 7 12.01 7H7.99A.99.99 0 0 1 7 5.997V1.003zm7 0C14 .45 14.451 0 14.99 0h4.02A.99.99 0 0 1 20 1.003v4.994C20 6.551 19.549 7 19.01 7h-4.02A.99.99 0 0 1 14 5.997V1.003z"/></symbol>
<symbol id="icon-new-post" viewBox="0 0 20 20"><path d="M0 5c0-.552.455-1 .992-1h18.016c.548 0 .992.445.992 1v14c0 .552-.455 1-.992 1H.992A.994.994 0 0 1 0 19V5zM0 1C0 .447.455 0 .992 0h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999H.992A.992.992 0 0 1 0 2.001V.999z"/></symbol>
<symbol id="icon-new-project" viewBox="0 0 20 20"><path d="M7 .995C7 .445 7.447 0 7.999 0H19c.552 0 .999.456.999.995v8.01c0 .55-.447.995-.999.995H8C7.447 10 7 9.544 7 9.005V.995zm0 11.003c0-.551.447-.998.999-.998H19c.552 0 .999.446.999.998v7.004c0 .551-.447.998-.999.998H8A.998.998 0 0 1 7 19.002v-7.004zM0 .992C0 .444.451 0 .99 0h4.02c.546 0 .99.455.99.992v18.016a.996.996 0 0 1-.99.992H.99a.999.999 0 0 1-.99-.992V.992z"/></symbol>
<symbol id="icon-person" viewBox="0 0 71 89"><path d="M67.783 66.757c-3.771-5.87-8.347-9.685-14.883-11.845 0 0-4.932-2.547-17.825-2.547-12.894 0-17.824 2.547-17.824 2.547C10.713 57.09 6.14 60.887 2.36 66.757.857 69.067.056 73.716 0 76.195c.02.645 0 1.391 0 2.14v4.28-2.954c0 4.734 3.216 8.568 7.188 8.568h55.756c3.972 0 7.188-3.834 7.188-8.568v2.955-4.28c0-.75-.01-1.496 0-2.14-.048-2.48-.86-7.129-2.35-9.439m-52.37-46.875c0 10.972 6.818 27.097 19.653 27.097 12.62 0 19.646-16.125 19.646-27.097C54.711 8.91 45.913 0 35.065 0 24.21 0 15.41 8.91 15.41 19.882"/></symbol>
<symbol id="icon-pin" viewBox="0 0 69 94"><path d="M52.574 70.837c2.547-7.953 1.484-16.383-2.442-23.31l10.066-21.632 4.344 2.02L69 18.34 29.581 0l-4.457 9.578 4.344 2.02L19.402 33.23C11.578 34.695 4.445 39.309 0 46.383l23.504 10.934L9.387 87.653c-1.188 2.546-.898 5.21.629 5.921 1.531.715 3.754-.789 4.937-3.331l14.113-30.336 23.508 10.93z"/></symbol>
<symbol id="icon-remove-collection" viewBox="0 0 20 20"><path d="M2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H2zm3 9c-.6 0-1 .4-1 1s.4 1 1 1h10c.6 0 1-.4 1-1s-.4-1-1-1H5z" fill-rule="evenodd" clip-rule="evenodd"/></symbol>
<symbol id="icon-team" viewBox="0 0 168 99"><path d="M117.145 76.778c-3.771-5.87-8.347-9.685-14.883-11.845 0 0-4.932-2.547-17.825-2.547-12.893 0-17.824 2.547-17.824 2.547-6.538 2.177-11.111 5.975-14.892 11.845-1.502 2.31-2.303 6.959-2.359 9.438.02.645 0 1.391 0 2.14v4.28-2.954c0 4.734 3.216 8.568 7.188 8.568h55.756c3.972 0 7.188-3.834 7.188-8.568v2.955-4.28c0-.75-.01-1.496 0-2.14-.048-2.48-.86-7.13-2.349-9.439M64.773 29.903C64.773 40.875 71.592 57 84.427 57c12.62 0 19.646-16.125 19.646-27.097 0-10.972-8.798-19.882-19.646-19.882-10.855 0-19.654 8.91-19.654 19.882M62.43 60.14c-3.17-4.033-6.97-6.809-12.062-8.483 0 0-4.611-2.388-16.657-2.388-12.053 0-16.664 2.388-16.664 2.388-6.111 2.036-10.385 5.574-13.912 11.066-1.396 2.16-2.15 6.506-2.207 8.825.02.606 0 1.307 0 2.007v1.241c0 4.421 3.008 7.998 6.724 7.998h33.653c.48-2.801 1.33-5.877 2.537-7.743 4.725-7.356 10.46-12.129 18.589-14.911zM33.496 43.911c11.79 0 18.364-15.073 18.364-25.326C51.86 8.333 43.636 0 33.496 0 23.348 0 15.124 8.333 15.124 18.585c0 10.253 6.367 25.326 18.372 25.326zM106.147 60.14c3.17-4.033 6.97-6.809 12.062-8.483 0 0 4.614-2.388 16.658-2.388 12.053 0 16.664 2.388 16.664 2.388 6.111 2.036 10.385 5.574 13.912 11.066 1.396 2.16 2.151 6.506 2.207 8.825-.02.606 0 1.307 0 2.007v1.241c0 4.421-3.009 7.998-6.724 7.998h-33.653c-.48-2.801-1.328-5.877-2.535-7.743-4.735-7.356-10.46-12.129-18.591-14.911zM134.532 43.911c-11.79 0-18.364-15.073-18.364-25.326C116.168 8.333 124.394 0 134.532 0c10.148 0 18.371 8.333 18.371 18.585 0 10.253-6.364 25.326-18.371 25.326z"/></symbol>
<symbol id="image" viewBox="0 0 8 8"><path d="M0 0v8h8V0H0zm1 1h6v3L6 3 5 4l2 2v1H6L2 3 1 4V1z"/></symbol>
<symbol id="italic" viewBox="0 0 8 8"><path d="M2 0v1h1.63l-.06.13-2 5-.34.88H.01v1h5v-1H3.38l.06-.13 2-5L5.78 1H7V0H2z"/></symbol>
<symbol id="link-intact" viewBox="0 0 8 8"><path d="M5.88.03a1.9 1.9 0 0 0-.53.09c-.27.1-.53.25-.75.47a.5.5 0 1 0 .69.69c.11-.11.24-.17.38-.22.35-.12.78-.07 1.06.22.39.39.39 1.04 0 1.44l-1.5 1.5c-.44.44-.8.48-1.06.47-.26-.01-.41-.13-.41-.13a.5.5 0 1 0-.5.88s.34.22.84.25c.5.03 1.2-.16 1.81-.78l1.5-1.5A1.98 1.98 0 0 0 6.44.07C6.26.03 6.06.03 5.88.04zm-2 2.31c-.5-.02-1.19.15-1.78.75L.6 4.59a1.98 1.98 0 0 0 0 2.81c.56.56 1.36.72 2.06.47.27-.1.53-.25.75-.47a.5.5 0 1 0-.69-.69c-.11.11-.24.17-.38.22-.35.12-.78.07-1.06-.22-.39-.39-.39-1.04 0-1.44l1.5-1.5c.4-.4.75-.45 1.03-.44.28.01.47.09.47.09a.5.5 0 1 0 .44-.88s-.34-.2-.84-.22z"/></symbol>
<symbol id="list" viewBox="0 0 8 8"><path d="M.5 0C.22 0 0 .22 0 .5s.22.5.5.5.5-.22.5-.5S.78 0 .5 0zM2 0v1h6V0H2zM.5 2c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S.78 2 .5 2zM2 2v1h6V2H2zM.5 4c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S.78 4 .5 4zM2 4v1h6V4H2zM.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S.78 6 .5 6zM2 6v1h6V6H2z"/></symbol>
<symbol id="lock" viewBox="0 0 100 125"><path d="M79.244 100H20.757a3.773 3.773 0 0 1-3.774-3.775V58.113a3.773 3.773 0 0 1 3.774-3.773h3.773V38.191c0-14.066 11.403-25.47 25.471-25.47 14.065 0 25.47 11.403 25.47 25.47V54.34h3.773a3.773 3.773 0 0 1 3.773 3.773v38.111A3.773 3.773 0 0 1 79.244 100zM63.482 38.945c0-7.445-6.037-13.48-13.481-13.48-7.446 0-13.481 6.035-13.481 13.48V54.34h26.963V38.945z"/></symbol>
<symbol id="log-out" viewBox="0 0 98.28 68.04"><path fill="none" d="M82.78 0h15.5v68.04h-15.5z"/><path d="M0 0h.51v68.04H0zM56 47.11V60.1H8.39V7.94H56v12.99h7.88V0H.51v68.04h63.37V47.11H56z"/><path fill="none" d="M0 0h22.97v68.04H0z"/><path d="M41.87 38.04h40.85l-9.93 9.9 5.63 5.67 19.35-19.49-19.35-19.48-5.63 5.57L82.51 30H41.87v8.04z"/></symbol>
<symbol id="logo" viewBox="0 0 138 26"><path d="M15 8a7 7 0 1 0 0 10m7-8.7L33 2l11 7.3v7.4L33 24l-11-7.3zm0 0l11 7.4 11-7.4m0 7.4L33 9.3l-11 7.4M33 2v7.3m0 7.4V24M52 6h5a7 7 0 0 1 0 14h-5zm28 0h-9v14h9m-9-7h6m11 1h6a4 4 0 0 0 0-8h-6v14m26-14h-9v14h9m-9-7h6m11 7V6l11 14V6"/></symbol>
<symbol id="mag" viewBox="0 0 56.7 56.7"><path d="M42.8 7.3C33-2.4 17.1-2.4 7.3 7.3c-9.8 9.8-9.8 25.7 0 35.5 8.7 8.7 22.2 9.7 32 2.9l9.6 9.6c1.8 1.8 4.7 1.8 6.4 0 1.8-1.8 1.8-4.7 0-6.4l-9.6-9.6c6.8-9.8 5.8-23.3-2.9-32zm-6.2 29.3c-6.4 6.4-16.7 6.4-23.1 0s-6.4-16.7 0-23.1c6.4-6.4 16.7-6.4 23.1 0 6.4 6.4 6.4 16.8 0 23.1z"/></symbol>
<symbol id="menu" viewBox="0 0 100 100"><path d="M0 3.415h100v22.532H0zM0 38.734h100v22.532H0zM0 74.053h100v22.532H0z"/></symbol>
<symbol id="numbered-list" viewBox="0 0 7.75 7.63"><path d="M1.75.58v1h6v-1h-6zm0 2.49v1h6v-1h-6zm0 2.49v1h6v-1h-6z"/><text transform="translate(0 1.8)" font-size="2.1" font-family="Arial" font-weight="700">1<tspan x="0" y="2.52">2</tspan><tspan x="0" y="5.04">3</tspan></text></symbol>
<symbol id="octocat" viewBox="0 0 250 243.83"><path d="M125 0a125 125 0 0 0-39.5 243.61c6.25 1.15 8.53-2.71 8.53-6 0-3-.11-10.83-.17-21.26-34.77 7.55-42.11-16.76-42.11-16.76-5.68-14.44-13.88-18.28-13.88-18.28-11.35-7.76.86-7.6.86-7.6 12.54.88 19.15 12.88 19.15 12.88C69 205.67 87.13 200.16 94.25 197c1.14-8.08 4.36-13.59 7.94-16.71-27.76-3.15-56.94-13.88-56.94-61.78a48.32 48.32 0 0 1 12.86-33.59c-1.29-3.16-5.57-15.87 1.23-33.08 0 0 10.5-3.36 34.37 12.81a118.48 118.48 0 0 1 62.59 0c23.86-16.18 34.34-12.81 34.34-12.81 6.82 17.21 2.53 29.92 1.24 33.08a48.24 48.24 0 0 1 12.85 33.54c0 48-29.23 58.59-57.07 61.68 4.49 3.86 8.49 11.49 8.49 23.15 0 16.71-.15 30.19-.15 34.29 0 3.34 2.25 7.23 8.6 6A125 125 0 0 0 125 0z" fill-rule="evenodd"/></symbol>
<symbol id="podcast" viewBox="0 0 47 88"><g fill="none" stroke="#00c1ff"><g stroke-width="4" transform="translate(2)"><rect height="57" rx="13" width="26" x="9" y="2"/><path d="M0 49c0 11 9.6 20 21.5 20S43 60 43 49M31 88c0-2.2-4.3-4-9.5-4S12 85.8 12 88"/><path d="M22 69.5v13" stroke-linecap="square"/></g><path stroke-width="3" d="M14 54.5l11-11m-14-4.8l6.7-6.7M11 29.7l3.9-3.9M11 47.7l6.7-6.7M21 57.7l6.7-6.7M11 20.5l4.6-4.6" stroke-linecap="round"/></g></symbol>
<symbol id="pop-out" viewBox="0 0 95.74 91.69"><path d="M46.591 35.398l26.7-26.7 12.523 12.523-26.7 26.7z"/><path d="M93.03 37L58.35 1.5l35.08.41-.4 35.09zM95.73 91.69H0V0h47.87v13H13v65.69h69.74V45.85h12.99v45.84z"/></symbol>
<symbol id="rerun" viewBox="0 0 100 100"><path d="M55.702 50.002L77.85 72.324 100 50.002l-9.173-9.249-6.611 6.668C82.878 25.187 64.56 7.5 42.169 7.5 18.916 7.5 0 26.567 0 50.002 0 73.436 18.917 92.5 42.169 92.5h16.218V79.424H42.169c-16.102 0-29.193-13.197-29.193-29.421 0-16.229 13.092-29.426 29.193-29.426 15.08 0 27.37 11.615 28.892 26.41l-6.184-6.233-9.175 9.248z"/></symbol>
<symbol id="rss" viewBox="0 0 100 100"><path d="M7.336 62.163A6.166 6.166 0 0 0 0 68.216v25.617A6.167 6.167 0 0 0 6.166 100h25.616a6.165 6.165 0 0 0 6.054-7.341c-2.96-15.281-15.216-27.539-30.5-30.496z"/><path d="M6.764 30.957a6.144 6.144 0 0 0-4.739 1.571A6.161 6.161 0 0 0 0 37.096v3.098a6.17 6.17 0 0 0 5.536 6.136c25.302 2.59 45.544 22.831 48.136 48.132a6.168 6.168 0 0 0 6.135 5.539h3.098a6.17 6.17 0 0 0 6.137-6.763C65.841 60.349 39.65 34.158 6.764 30.957z"/><path d="M99.986 93.431C96.732 43.428 56.568 3.268 6.565.012A6.163 6.163 0 0 0 0 6.167v3.088a6.167 6.167 0 0 0 5.752 6.155c42.113 2.832 76.006 36.726 78.839 78.84a6.167 6.167 0 0 0 6.151 5.75h3.091a6.165 6.165 0 0 0 6.153-6.569z"/></symbol>
<symbol id="share" viewBox="0 0 100 100"><path d="M75 46.226v15.096l25-25.161L75 11v12.581c-38.25.25-37.5 37.742-37.5 37.742S51.126 42.477 75 46.226zm-20-32.71H7.5c-6.15 0-7.5 1.761-7.5 7.549v60.387C0 87.718 1.499 89 7.5 89H80c6.025 0 7.5-1.133 7.5-7.548v-20.13L75 72.117v4.302H12.5V26.097h30L55 13.516z"/></symbol>
<symbol id="sort-down" viewBox="0 0 100 100"><path fill="#FFF" d="M100 54l-50 46L0 54z"/><path fill="#727373" d="M0 46L50 0l50 46z"/></symbol>
<symbol id="sort-up" viewBox="0 0 100 100"><path fill="#FFF" d="M0 46L50 0l50 46z"/><path fill="#727373" d="M100 54l-50 46L0 54z"/></symbol>
<symbol id="sort" viewBox="0 0 100 100"><path fill="#727373" d="M0 46L50 0l50 46zM100 54l-50 46L0 54z"/></symbol>
<symbol id="spark" viewBox="0 0 49 90"><path d="M26.357 22.315L29.16.87a1 1 0 0 1 1.984.013l2.482 21.13 8.547-5.887a1 1 0 0 1 1.362 1.43l-7.372 9.665 11.622 1.688a1 1 0 0 1 .04 1.973l-10.864 2.027 6.372 8.348a1 1 0 0 1-1.374 1.421l-8.202-5.834-2.961 22.647a1 1 0 0 1-1.985-.013l-2.655-22.606-7.92 5.983a1 1 0 0 1-1.43-1.36l5.866-8.633-10.852-1.98a1 1 0 0 1 .039-1.974l11.788-1.672-6.652-9.523a1 1 0 0 1 1.422-1.372l7.939 5.974zM10.544 72.757L1.007 60.424a.5.5 0 0 1 .707-.697l12.36 9.814.867-4.978a1 1 0 0 1 1.975.028l.835 5.76 6.6-4.894a.5.5 0 0 1 .711.683l-4.504 6.63 4.971.718a1 1 0 0 1 .014 1.977l-4.727.749 10.092 13.05a.5.5 0 0 1-.706.698L17.66 80.004l-.531 4.122a1 1 0 0 1-1.972.07l-.992-4.934-7.071 4.846a.5.5 0 0 1-.684-.711l5.34-7.152-5.27-.99a1 1 0 0 1 .055-1.974l4.01-.524z" fill="#00c1ff"/></symbol>
<symbol id="spinner" viewBox="0 0 190 190"><circle class="a" cx="94.57" cy="11.57" r="11.57"/><circle class="a" cx="94.57" cy="178.43" r="11.57"/><circle class="a" cx="178.43" cy="95.49" r="11.57"/><circle class="a" cx="11.57" cy="95.49" r="11.57"/><circle class="a" cx="137.94" cy="24.07" r="11.57" transform="rotate(-59.3 138.287 23.966)"/><circle class="a" cx="52.36" cy="166.9" r="11.57" transform="rotate(-59.48 52.36 166.904)"/><circle class="a" cx="165.1" cy="139.35" r="11.57" transform="rotate(-59.48 165.1 139.353)"/><circle class="a" cx="21.43" cy="55.89" r="11.57" transform="rotate(-59.48 21.432 55.892)"/><circle class="a" cx="166.72" cy="52.36" r="11.57" transform="rotate(-30.7 164.832 52.326)"/><circle class="a" cx="23.61" cy="137.45" r="11.57" transform="rotate(-30.34 23.607 137.456)"/><circle class="a" cx="135.97" cy="167.48" r="11.57" transform="rotate(-30.34 135.968 167.485)"/><circle class="a" cx="50.96" cy="24.53" r="11.57" transform="rotate(-30.34 50.959 24.527)"/></symbol>
<symbol id="split-screen" viewBox="0 0 7.77 7.77"><rect x=".2" y=".2" width="7.37" height="7.37" rx=".5" ry=".5" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".4"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".4" d="M3.89.2v7.37"/><path stroke="#000" stroke-miterlimit="10" stroke-width=".2" d="M.2 1.23h7.37V.7l-.5-.5H.7L.2.7v.53z"/></symbol>
<symbol id="star" viewBox="0 0 89 84.64"><path d="M44.5 0l11.51 30.95L89 32.33 63.12 52.84 72 84.64 44.5 66.37 17 84.64l8.88-31.8L0 32.33l32.99-1.38L44.5 0z"/></symbol>
<symbol id="trash-can" viewBox="0 0 16 19"><path d="M.177 7.152A1 1 0 0 1 1.166 6h13.668a1 1 0 0 1 .989 1.152l-1.693 11a1 1 0 0 1-.988.848H2.858a1 1 0 0 1-.988-.848l-1.693-11zM0 4a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z"/></symbol>
<symbol id="tv" viewBox="0 0 64.3 66.07"><path d="M60.27 62.06H4V20.2h56.27v41.86zm2-45.87H36.38l6.9-6.9a1.57 1.57 0 1 0-2.23-2.23l-8.66 8.66L17.12.46a1.57 1.57 0 1 0-2.22 2.23l13.49 13.49H2a2 2 0 0 0-2 2v45.88a2 2 0 0 0 2 2h60.29a2 2 0 0 0 2-2V18.19a2 2 0 0 0-2.01-2.01z"/><rect x="9.12" y="25.24" width="39.22" height="31.76" rx="1.28" ry="1.28"/><path d="M56.74 29.29a2.38 2.38 0 0 1-4.76 0 2.38 2.38 0 1 1 4.76 0M56.74 36.35a2.38 2.38 0 0 1-4.76 0 2.38 2.38 0 0 1 4.76 0"/></symbol>
<symbol id="twitter" viewBox="0 0 100 100"><path d="M100.001 17.942a39.965 39.965 0 0 1-11.783 3.339c4.236-2.624 7.49-6.779 9.021-11.73a40.289 40.289 0 0 1-13.026 5.146C80.47 10.575 75.138 8 69.234 8c-11.33 0-20.518 9.494-20.518 21.205 0 1.662.183 3.281.533 4.833-17.052-.884-32.168-9.326-42.288-22.155a21.637 21.637 0 0 0-2.778 10.659c0 7.357 3.622 13.849 9.127 17.65a19.94 19.94 0 0 1-9.293-2.651c-.002.089-.002.178-.002.268 0 10.272 7.072 18.845 16.458 20.793a19.939 19.939 0 0 1-9.264.365c2.609 8.424 10.187 14.555 19.166 14.726-7.021 5.688-15.867 9.077-25.48 9.077A40.59 40.59 0 0 1 0 82.473C9.08 88.491 19.865 92 31.449 92c37.737 0 58.374-32.312 58.374-60.336 0-.92-.02-1.834-.059-2.743a42.547 42.547 0 0 0 10.237-10.979z"/></symbol>
<symbol id="user" viewBox="-255 347 100 100"><path d="M-205 352c-24.9 0-45 20.1-45 45s20.1 45 45 45 45-20.1 45-45-20.1-45-45-45zm-26 72.4c1.8-.8 3.6-1.4 5.5-1.9 5.2-1.2 8.3-2.9 9.3-5.1.8-1.7.3-4-1.2-6.9-9.6-17.7-7.9-27.7-4.8-32.9 3.1-5.3 9.1-8.2 16.7-8.2s13.5 2.9 16.6 8.1c3.1 5.2 4.8 15.2-4.7 33-1.6 3-2 5.3-1.2 7 1 2.1 4.1 3.8 9.3 5 1.8.4 4 1.1 6.3 2.1-6.7 6.3-15.8 10.1-25.7 10.1-10.2.1-19.3-3.9-26.1-10.3z"/></symbol>
<symbol id="viewswitcher" viewBox="-703.9 491.1 31.7 25.3"><path d="M-688.1 499.6c-4.3 0-8.1 2.2-10.4 5.6 2.2 3.4 6 5.6 10.4 5.6 4.3 0 8.1-2.2 10.4-5.6-2.2-3.3-6-5.6-10.4-5.6zm0 9.9c-2.3 0-4.2-1.9-4.2-4.2-.1-2.4 1.8-4.3 4.2-4.3 2.3 0 4.2 1.9 4.2 4.2 0 2.4-1.9 4.3-4.2 4.3z"/><path d="M-673.4 491.1h-29.3c-.7 0-1.2.5-1.2 1.2v22.9c0 .7.5 1.2 1.2 1.2h29.3c.7 0 1.2-.5 1.2-1.2v-22.9c0-.6-.6-1.2-1.2-1.2zm-28.1 22.9v-17.1h26.8V514h-26.8z"/></symbol>
<symbol id="x" viewBox="0 0 100 100"><path d="M100 78.905L78.735 100 49.608 71.094 21.263 99.217 0 78.123 28.344 50 0 21.877 21.263.78l28.345 28.125L78.735 0 100 21.094 70.862 50z"/></symbol>
<symbol id="zip-badge" viewBox="0 0 23 17"><path d="M18.18 5.76a1.221 1.221 0 0 0-.461-.273 2.044 2.044 0 0 0-.663-.096H16v2.772h1.056c.528 0 .908-.126 1.14-.378.232-.252.348-.604.348-1.056 0-.2-.03-.382-.09-.546a1.118 1.118 0 0 0-.273-.423zM21 0H2C.9 0 0 .9 0 2v13c0 1.1.9 2 2 2h19c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM9.208 4.605a.936.936 0 0 1-.051.306c-.034.1-.081.194-.141.282l-4.104 5.862h4.164v1.56H2.332v-.78c0-.093.016-.184.048-.273a.951.951 0 0 1 .132-.25l4.116-5.88h-3.96v-1.56h6.54v.733zm3.145 8.01h-2.041V3.872h2.04v8.741zm8.01-4.686c-.141.364-.355.676-.643.936-.288.26-.654.462-1.095.609-.442.145-.965.218-1.57.218H16v2.922h-2.028V3.873h3.084c.616 0 1.145.073 1.587.219.442.146.806.347 1.092.603.286.256.496.558.633.906.136.348.204.724.204 1.128 0 .436-.07.836-.21 1.2z"/></symbol>
</svg>
const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");
symbols.forEach(symbol => {
var path = symbol.querySelectorAll('path');
document.body.insertAdjacentHTML("beforeend", `
<svg width="50" height="50">
<title>#${symbol.id}</title>
<use xlink:href="#${symbol.id}" />
<svg>
`);
});
Also see: Tab Triggers