diff --git a/README.md b/README.md
index b9c63d0b781484803e092338ad61815295a0d940..950d4ef6702b5ce8657bd03c49adb03cad344294 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,30 @@ ```
---
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/plus.svg" width="24" height="24" /> | **Plus**
+---|---
+
+
+```html
+<svg id="i-plus" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+</svg>
+```
+
+---
+
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/minus.svg" width="24" height="24" /> | **Minus**
+---|---
+
+
+```html
+<svg id="i-minus" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 16" />
+</svg>
+```
+
+---
+
<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/play.svg" width="24" height="24" /> | **Play**
---|---
@@ -644,6 +668,42 @@ ```
---
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/book.svg" width="24" height="24" /> | **Book**
+---|---
+
+
+```html
+<svg id="i-book" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
+</svg>
+```
+
+---
+
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/calendar.svg" width="24" height="24" /> | **Calendar**
+---|---
+
+
+```html
+<svg id="i-calendar" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+</svg>
+```
+
+---
+
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/print.svg" width="24" height="24" /> | **Print**
+---|---
+
+
+```html
+<svg id="i-print" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
+</svg>
+```
+
+---
+
<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/eye.svg" width="24" height="24" /> | **Eye**
---|---
@@ -699,17 +759,6 @@
```html
<svg id="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
-</svg>
-```
-
----
-
-<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/fire.svg" width="24" height="24" /> | **Fire**
----|---
-
-```html
-<svg id="i-fire" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />
</svg>
```
@@ -825,6 +874,17 @@
```
---
+
+<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/send.svg" width="24" height="24" /> | **Send**
+---|---
+
+```html
+<svg id="i-send" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+</svg>
+```
+
+All 79 icons weigh in at 9kb minified (2kb in SVGZ).
<img src="https://cdn.rawgit.com/danklammer/bytesize-icons/master/dist/icons/link.svg" width="24" height="24" /> | **Link**
---|---
diff --git a/dist/bytesize-inline.svg b/dist/bytesize-inline.svg
index 347a3a70b3e1db3adb306d39a2219202b71ea1df..a0017ebf79268e283e11b1c00f1ce021612c1872 100644
--- a/dist/bytesize-inline.svg
+++ b/dist/bytesize-inline.svg
@@ -9,6 +9,14 @@
<svg id="i-activity" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
-</svg>
-
-<svg id="i-fire" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />
</svg>
<svg id="i-location" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
@@ -266,6 +287,11 @@
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
+ <path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg">
<svg id="i-caret-bottom" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</svg>
@@ -282,10 +308,6 @@
<svg id="i-unlock" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 7 9 3 16 3 23 3 23 8 23 9 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
-</svg>
-
-<svg id="i-bell" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
</svg>
<svg id="i-alert" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
@@ -310,7 +332,7 @@
<svg id="i-gift" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<svg xmlns="http://www.w3.org/2000/svg">
-</svg>
+<svg id="i-play" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="14" cy="14" r="12" />
</svg>
diff --git a/dist/bytesize-symbols.min.svg b/dist/bytesize-symbols.min.svg
index b9329948db8417c0caa9d612abbf2fab04a8b961..7761594277fb82a9c1a98e82e37e8e2c9298aff3 100644
--- a/dist/bytesize-symbols.min.svg
+++ b/dist/bytesize-symbols.min.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"><symbol id="i-search" viewBox="0 0 32 32"><circle cx="14" cy="14" r="12"/><path d="M23 23l7 7"/></symbol><symbol id="i-close" viewBox="0 0 32 32"><path d="M2 30L30 2m0 28L2 2"/></symbol><symbol id="i-play" viewBox="0 0 32 32"><path d="M10 2v28l14-14z"/></symbol><symbol id="i-pause" viewBox="0 0 32 32"><path d="M23 2v28M9 2v28"/></symbol><symbol id="i-backwards" viewBox="0 0 32 32"><path d="M16 2L2 16l14 14V16l14 14V2L16 16z"/></symbol><symbol id="i-forwards" viewBox="0 0 32 32"><path d="M16 2l14 14-14 14V16L2 30V2l14 14z"/></symbol><symbol id="i-star" viewBox="0 0 32 32"><path d="M16 2l4 10h10l-8 7 3 11-9-7-9 7 3-11-8-7h10z"/></symbol><symbol id="i-checkmark" viewBox="0 0 32 32"><path d="M2 20l10 8L30 4"/></symbol><symbol id="i-chevron-top" viewBox="0 0 32 32"><path d="M30 20L16 8 2 20"/></symbol><symbol id="i-chevron-right" viewBox="0 0 32 32"><path d="M12 30l12-14L12 2"/></symbol><symbol id="i-chevron-bottom" viewBox="0 0 32 32"><path d="M30 12L16 24 2 12"/></symbol><symbol id="i-chevron-left" viewBox="0 0 32 32"><path d="M20 30L8 16 20 2"/></symbol><symbol id="i-arrow-top" viewBox="0 0 32 32"><path d="M6 10l10-8 10 8M16 2v28"/></symbol><symbol id="i-arrow-right" viewBox="0 0 32 32"><path d="M22 6l8 10-8 10m8-10H2"/></symbol><symbol id="i-arrow-bottom" viewBox="0 0 32 32"><path d="M6 22l10 8 10-8m-10 8V2"/></symbol><symbol id="i-arrow-left" viewBox="0 0 32 32"><path d="M10 6L2 16l8 10M2 16h28"/></symbol><symbol id="i-caret-top" viewBox="0 0 32 32"><path d="M30 22L16 6 2 22z"/></symbol><symbol id="i-caret-right" viewBox="0 0 32 32"><path d="M10 30l16-14L10 2z"/></symbol><symbol id="i-caret-bottom" viewBox="0 0 32 32"><path d="M30 10L16 26 2 10z"/></symbol><symbol id="i-caret-left" viewBox="0 0 32 32"><path d="M22 30L6 16 22 2z"/></symbol><symbol id="i-start" viewBox="0 0 32 32"><path d="M8 2v14L22 2v28L8 16v14"/></symbol><symbol id="i-end" viewBox="0 0 32 32"><path d="M24 2v14L10 2v28l14-14v14"/></symbol><symbol id="i-eject" viewBox="0 0 32 32"><path d="M30 18L16 5 2 18zM2 25h28"/></symbol><symbol id="i-mute" viewBox="0 0 32 32"><path d="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14z"/></symbol><symbol id="i-volume" viewBox="0 0 32 32"><path d="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14zm1-14s4 4 4 14-4 14-4 14m6-26s3 4 3 12-3 12-3 12"/></symbol><symbol id="i-ban" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14"/><path d="M6 6l20 20"/></symbol><symbol id="i-flag" viewBox="0 0 32 32"><path d="M6 2v28M6 6h20l-6 6 6 6H6"/></symbol><symbol id="i-options" viewBox="0 0 32 32"><path d="M28 6H4m24 10H4m24 10H4M24 3v6M8 13v6m12 4v6"/></symbol><symbol id="i-settings" viewBox="0 0 32 32"><path d="M13 2v4l-2 1-3-3-4 4 3 3-1 2H2v6h4l1 2-3 3 4 4 3-3 2 1v4h6v-4l2-1 3 3 4-4-3-3 1-2h4v-6h-4l-1-2 3-3-4-4-3 3-2-1V2z"/><circle cx="16" cy="16" r="4"/></symbol><symbol id="i-heart" viewBox="0 0 32 32"><path d="M4 16C1 12 2 6 7 4s8 2 9 4c1-2 5-6 10-4s5 8 2 12-12 12-12 12-9-8-12-12z"/></symbol><symbol id="i-clock" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14"/><path d="M16 8v8l4 4"/></symbol><symbol id="i-menu" viewBox="0 0 32 32"><path d="M4 8h24M4 16h24M4 24h24"/></symbol><symbol id="i-msg" viewBox="0 0 32 32"><path d="M2 4h28v18H16l-8 7v-7H2z"/></symbol><symbol id="i-photo" viewBox="0 0 32 32"><path d="M20 24l-8-8L2 26V2h28v22m-14-4l6-6 8 8v8H2v-6"/><circle cx="10" cy="9" r="3"/></symbol><symbol id="i-camera" viewBox="0 0 32 32"><path d="M2 8h7l3-4h8l3 4h7v18H2z"/><circle cx="16" cy="16" r="5"/></symbol><symbol id="i-video" viewBox="0 0 32 32"><path d="M22 13l8-5v16l-8-5zM2 8v16h20V8z"/></symbol><symbol id="i-music" viewBox="0 0 32 32"><path d="M11 25V6l13-3v20M11 13l13-3"/><ellipse cx="7" cy="25" rx="4" ry="5"/><ellipse cx="20" cy="23" rx="4" ry="5"/></symbol><symbol id="i-mail" viewBox="0 0 32 32"><path d="M2 26h28V6H2zM2 6l14 10L30 6"/></symbol><symbol id="i-home" viewBox="0 0 32 32"><path d="M12 20v10H4V12L16 2l12 10v18h-8V20z"/></symbol><symbol id="i-user" viewBox="0 0 32 32"><path d="M22 11c0 5-3 9-6 9s-6-4-6-9 2-8 6-8 6 3 6 8zM4 30h24c0-9-6-10-12-10S4 21 4 30z"/></symbol><symbol id="i-trash" viewBox="0 0 32 32"><path d="M28 6H6l2 24h16l2-24H4m12 6v12m5-12l-1 12m-9-12l1 12m0-18l1-4h6l1 4"/></symbol><symbol id="i-paperclip" viewBox="0 0 32 32"><path d="M10 9v15c0 4 3 6 6 6s6-2 6-6V6c0-3-2-4-4-4s-4 1-4 4v17c0 1 1 2 2 2s2-1 2-2V9"/></symbol><symbol id="i-file" viewBox="0 0 32 32"><path d="M6 2v28h20V10l-8-8zm12 0v8h8"/></symbol><symbol id="i-folder" viewBox="0 0 32 32"><path d="M2 26h28V7H14l-4-3H2zm28-14H2"/></symbol><symbol id="i-folder-open" viewBox="0 0 32 32"><path d="M4 28h24l2-16H14l-4-4H2zm24-16V4H4v4"/></symbol><symbol id="i-work" viewBox="0 0 32 32"><path d="M30 8H2v18h28zM20 8s0-4-4-4-4 4-4 4M8 26V8m16 18V8"/></symbol><symbol id="i-portfolio" viewBox="0 0 32 32"><path d="M29 17v11H3V17M2 8h28v8s-6 4-14 4-14-4-14-4V8zm14 14v-4m4-10s0-4-4-4-4 4-4 4"/></symbol><symbol id="i-eye" viewBox="0 0 32 32"><circle cx="17" cy="15" r="1"/><circle cx="16" cy="16" r="6"/><path d="M2 16S7 6 16 6s14 10 14 10-5 10-14 10S2 16 2 16z"/></symbol><symbol id="i-bookmark" viewBox="0 0 32 32"><path d="M6 2h20v28L16 20 6 30z"/></symbol><symbol id="i-tag" viewBox="0 0 32 32"><circle cx="24" cy="8" r="2"/><path d="M2 18L18 2h12v12L14 30z"/></symbol><symbol id="i-lightning" viewBox="0 0 32 32"><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></symbol><symbol id="i-activity" viewBox="0 0 32 32"><path d="M4 16h7l3 13 4-26 3 13h7"/></symbol><symbol id="i-fire" viewBox="0 0 32 32"><path d="M15 30c-15 0 0-17-3-27 16 10 20 27 3 27zm2 0c-7 0 0-10 0-10s7 10 0 10z"/></symbol><symbol id="i-location" viewBox="0 0 32 32"><circle cx="16" cy="11" r="4"/><path d="M24 15c-3 7-8 15-8 15s-5-8-8-15 2-13 8-13 11 6 8 13z"/></symbol><symbol id="i-export" viewBox="0 0 32 32"><path d="M28 22v8H4v-8M16 4v20M8 12l8-8 8 8"/></symbol><symbol id="i-import" viewBox="0 0 32 32"><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></symbol><symbol id="i-inbox" viewBox="0 0 32 32"><path d="M2 15v10h28V15l-4-8H6zm0 0h8s1 5 6 5 6-5 6-5h8"/></symbol><symbol id="i-archive" viewBox="0 0 32 32"><path d="M4 10v18h24V10M2 4v6h28V4zm10 11h8"/></symbol><symbol id="i-reply" viewBox="0 0 32 32"><path d="M10 6l-7 8 7 8m-7-8h15c8 0 12 4 12 12"/></symbol><symbol id="i-edit" viewBox="0 0 32 32"><path d="M30 7l-5-5L5 22l-2 7 7-2zm-9-1l5 5zM5 22l5 5z"/></symbol><symbol id="i-compose" viewBox="0 0 32 32"><path d="M27 15v15H2V5h15m13 1l-4-4L9 19l-2 6 6-2zm-8 0l4 4zM9 19l4 4z"/></symbol><symbol id="i-upload" viewBox="0 0 32 32"><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12-4l5-4 5 4m-5-4v15"/></symbol><symbol id="i-download" viewBox="0 0 32 32"><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></symbol><symbol id="i-link" viewBox="0 0 32 32"><path d="M18 8s6-6 9-3 2 7-3 11-8 5-10 1m0 7s-6 6-9 3-2-7 3-11 8-5 10-1"/></symbol><symbol id="i-code" viewBox="0 0 32 32"><path d="M10 9l-7 8 7 8M22 9l7 8-7 8M18 7l-4 20"/></symbol><symbol id="i-lock" viewBox="0 0 32 32"><path d="M5 15v15h22V15zm4 0C9 9 9 5 16 5s7 4 7 10m-7 5v3"/><circle cx="16" cy="24" r="1"/></symbol><symbol id="i-unlock" viewBox="0 0 32 32"><path d="M5 15v15h22V15zm4 0C9 7 9 3 16 3s7 5 7 6m-7 11v3"/><circle cx="16" cy="24" r="1"/></symbol><symbol id="i-bell" viewBox="0 0 32 32"><path d="M8 17c0-5 1-11 8-11s8 6 8 11 3 8 3 8H5s3-3 3-8zm12 8s0 4-4 4-4-4-4-4m4-22v3"/></symbol><symbol id="i-alert" viewBox="0 0 32 32"><path d="M16 3l14 26H2zm0 8v8m0 4v2"/></symbol><symbol id="i-info" viewBox="0 0 32 32"><path d="M16 14v9m0-15v2"/><circle cx="16" cy="16" r="14"/></symbol><symbol id="i-creditcard" viewBox="0 0 32 32"><path d="M2 7v18h28V7zm3 11h4m-4 3h6"/><path d="M2 11v2h28v-2z" fill="currentColor"/></symbol><symbol id="i-cart" viewBox="0 0 32 32"><path d="M6 6h24l-3 13H9m18 4H10L5 2H2"/><circle cx="25" cy="27" r="2"/><circle cx="12" cy="27" r="2"/></symbol><symbol id="i-gift" viewBox="0 0 32 32"><path d="M4 14v16h24V14M2 9v5h28V9H2zm14 0s-2-9-8-6 8 6 8 6 2-9 8-6-8 6-8 6"/></symbol><symbol id="i-external" viewBox="0 0 32 32"><path d="M14 9H3v20h20V18M18 4h10v10m0-10L14 18"/></symbol><symbol id="i-reload" viewBox="0 0 32 32"><path d="M29 16c0 6-5 13-13 13S3 22 3 16 8 3 16 3c5 0 9 3 11 6m-7 1l7-1 1-7"/></symbol><symbol id="i-ellipsis-horizontal" viewBox="0 0 32 32"><circle cx="7" cy="16" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="25" cy="16" r="2"/></symbol><symbol id="i-ellipsis-vertical" viewBox="0 0 32 32"><circle cx="16" cy="7" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="16" cy="25" r="2"/></symbol><symbol id="i-twitter" viewBox="0 0 64 64"><path stroke-width="0" fill="currentColor" d="M60 16l-6 1 4-5-7 2c-9-10-23 1-19 10C16 24 8 12 8 12s-6 9 4 16l-6-2c0 6 4 10 11 12h-7c4 8 11 8 11 8s-6 5-17 5c33 16 53-14 50-30z"/></symbol><symbol id="i-github" viewBox="0 0 64 64"><path stroke-width="0" fill="currentColor" d="M32 0C14 0 0 14 0 32c0 21 19 30 22 30 2 0 2-1 2-2v-5c-7 2-10-2-11-5 0 0 0-1-2-3-1-1-5-3-1-3 3 0 5 4 5 4 3 4 7 3 9 2 0-2 2-4 2-4-8-1-14-4-14-15 0-4 1-7 3-9 0 0-2-4 0-9 0 0 5 0 9 4 3-2 13-2 16 0 4-4 9-4 9-4 2 7 0 9 0 9 2 2 3 5 3 9 0 11-7 14-14 15 1 1 2 3 2 6v8c0 1 0 2 2 2 3 0 22-9 22-30C64 14 50 0 32 0z"/></symbol></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"><symbol id="i-search" viewBox="0 0 32 32"><circle cx="14" cy="14" r="12"/><path d="M23 23l7 7"/></symbol><symbol id="i-close" viewBox="0 0 32 32"><path d="M2 30L30 2m0 28L2 2"/></symbol><symbol id="i-plus" viewBox="0 0 32 32"><path d="M16 2v28M2 16h28"/></symbol><symbol id="i-minus" viewBox="0 0 32 32"><path d="M2 16h28"/></symbol><symbol id="i-play" viewBox="0 0 32 32"><path d="M10 2v28l14-14z"/></symbol><symbol id="i-pause" viewBox="0 0 32 32"><path d="M23 2v28M9 2v28"/></symbol><symbol id="i-backwards" viewBox="0 0 32 32"><path d="M16 2L2 16l14 14V16l14 14V2L16 16z"/></symbol><symbol id="i-forwards" viewBox="0 0 32 32"><path d="M16 2l14 14-14 14V16L2 30V2l14 14z"/></symbol><symbol id="i-star" viewBox="0 0 32 32"><path d="M16 2l4 10h10l-8 7 3 11-9-7-9 7 3-11-8-7h10z"/></symbol><symbol id="i-checkmark" viewBox="0 0 32 32"><path d="M2 20l10 8L30 4"/></symbol><symbol id="i-chevron-top" viewBox="0 0 32 32"><path d="M30 20L16 8 2 20"/></symbol><symbol id="i-chevron-right" viewBox="0 0 32 32"><path d="M12 30l12-14L12 2"/></symbol><symbol id="i-chevron-bottom" viewBox="0 0 32 32"><path d="M30 12L16 24 2 12"/></symbol><symbol id="i-chevron-left" viewBox="0 0 32 32"><path d="M20 30L8 16 20 2"/></symbol><symbol id="i-arrow-top" viewBox="0 0 32 32"><path d="M6 10l10-8 10 8M16 2v28"/></symbol><symbol id="i-arrow-right" viewBox="0 0 32 32"><path d="M22 6l8 10-8 10m8-10H2"/></symbol><symbol id="i-arrow-bottom" viewBox="0 0 32 32"><path d="M6 22l10 8 10-8m-10 8V2"/></symbol><symbol id="i-arrow-left" viewBox="0 0 32 32"><path d="M10 6L2 16l8 10M2 16h28"/></symbol><symbol id="i-caret-top" viewBox="0 0 32 32"><path d="M30 22L16 6 2 22z"/></symbol><symbol id="i-caret-right" viewBox="0 0 32 32"><path d="M10 30l16-14L10 2z"/></symbol><symbol id="i-caret-bottom" viewBox="0 0 32 32"><path d="M30 10L16 26 2 10z"/></symbol><symbol id="i-caret-left" viewBox="0 0 32 32"><path d="M22 30L6 16 22 2z"/></symbol><symbol id="i-start" viewBox="0 0 32 32"><path d="M8 2v14L22 2v28L8 16v14"/></symbol><symbol id="i-end" viewBox="0 0 32 32"><path d="M24 2v14L10 2v28l14-14v14"/></symbol><symbol id="i-eject" viewBox="0 0 32 32"><path d="M30 18L16 5 2 18zM2 25h28"/></symbol><symbol id="i-mute" viewBox="0 0 32 32"><path d="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14z"/></symbol><symbol id="i-volume" viewBox="0 0 32 32"><path d="M20 16c0-8-5-14-5-14l-7 8H2v12h6l7 8s5-6 5-14zm1-14s4 4 4 14-4 14-4 14m6-26s3 4 3 12-3 12-3 12"/></symbol><symbol id="i-ban" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14"/><path d="M6 6l20 20"/></symbol><symbol id="i-flag" viewBox="0 0 32 32"><path d="M6 2v28M6 6h20l-6 6 6 6H6"/></symbol><symbol id="i-options" viewBox="0 0 32 32"><path d="M28 6H4m24 10H4m24 10H4M24 3v6M8 13v6m12 4v6"/></symbol><symbol id="i-settings" viewBox="0 0 32 32"><path d="M13 2v4l-2 1-3-3-4 4 3 3-1 2H2v6h4l1 2-3 3 4 4 3-3 2 1v4h6v-4l2-1 3 3 4-4-3-3 1-2h4v-6h-4l-1-2 3-3-4-4-3 3-2-1V2z"/><circle cx="16" cy="16" r="4"/></symbol><symbol id="i-heart" viewBox="0 0 32 32"><path d="M4 16C1 12 2 6 7 4s8 2 9 4c1-2 5-6 10-4s5 8 2 12-12 12-12 12-9-8-12-12z"/></symbol><symbol id="i-clock" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14"/><path d="M16 8v8l4 4"/></symbol><symbol id="i-menu" viewBox="0 0 32 32"><path d="M4 8h24M4 16h24M4 24h24"/></symbol><symbol id="i-msg" viewBox="0 0 32 32"><path d="M2 4h28v18H16l-8 7v-7H2z"/></symbol><symbol id="i-photo" viewBox="0 0 32 32"><path d="M20 24l-8-8L2 26V2h28v22m-14-4l6-6 8 8v8H2v-6"/><circle cx="10" cy="9" r="3"/></symbol><symbol id="i-camera" viewBox="0 0 32 32"><path d="M2 8h7l3-4h8l3 4h7v18H2z"/><circle cx="16" cy="16" r="5"/></symbol><symbol id="i-video" viewBox="0 0 32 32"><path d="M22 13l8-5v16l-8-5zM2 8v16h20V8z"/></symbol><symbol id="i-music" viewBox="0 0 32 32"><path d="M11 25V6l13-3v20M11 13l13-3"/><ellipse cx="7" cy="25" rx="4" ry="5"/><ellipse cx="20" cy="23" rx="4" ry="5"/></symbol><symbol id="i-mail" viewBox="0 0 32 32"><path d="M2 26h28V6H2zM2 6l14 10L30 6"/></symbol><symbol id="i-home" viewBox="0 0 32 32"><path d="M12 20v10H4V12L16 2l12 10v18h-8V20z"/></symbol><symbol id="i-user" viewBox="0 0 32 32"><path d="M22 11c0 5-3 9-6 9s-6-4-6-9 2-8 6-8 6 3 6 8zM4 30h24c0-9-6-10-12-10S4 21 4 30z"/></symbol><symbol id="i-trash" viewBox="0 0 32 32"><path d="M28 6H6l2 24h16l2-24H4m12 6v12m5-12l-1 12m-9-12l1 12m0-18l1-4h6l1 4"/></symbol><symbol id="i-paperclip" viewBox="0 0 32 32"><path d="M10 9v15c0 4 3 6 6 6s6-2 6-6V6c0-3-2-4-4-4s-4 1-4 4v17c0 1 1 2 2 2s2-1 2-2V9"/></symbol><symbol id="i-file" viewBox="0 0 32 32"><path d="M6 2v28h20V10l-8-8zm12 0v8h8"/></symbol><symbol id="i-folder" viewBox="0 0 32 32"><path d="M2 26h28V7H14l-4-3H2zm28-14H2"/></symbol><symbol id="i-folder-open" viewBox="0 0 32 32"><path d="M4 28h24l2-16H14l-4-4H2zm24-16V4H4v4"/></symbol><symbol id="i-work" viewBox="0 0 32 32"><path d="M30 8H2v18h28zM20 8s0-4-4-4-4 4-4 4M8 26V8m16 18V8"/></symbol><symbol id="i-portfolio" viewBox="0 0 32 32"><path d="M29 17v11H3V17M2 8h28v8s-6 4-14 4-14-4-14-4V8zm14 14v-4m4-10s0-4-4-4-4 4-4 4"/></symbol><symbol id="i-eye" viewBox="0 0 32 32"><circle cx="17" cy="15" r="1"/><circle cx="16" cy="16" r="6"/><path d="M2 16S7 6 16 6s14 10 14 10-5 10-14 10S2 16 2 16z"/></symbol><symbol id="i-bookmark" viewBox="0 0 32 32"><path d="M6 2h20v28L16 20 6 30z"/></symbol><symbol id="i-tag" viewBox="0 0 32 32"><circle cx="24" cy="8" r="2"/><path d="M2 18L18 2h12v12L14 30z"/></symbol><symbol id="i-lightning" viewBox="0 0 32 32"><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></symbol><symbol id="i-activity" viewBox="0 0 32 32"><path d="M4 16h7l3 13 4-26 3 13h7"/></symbol><symbol id="i-location" viewBox="0 0 32 32"><circle cx="16" cy="11" r="4"/><path d="M24 15c-3 7-8 15-8 15s-5-8-8-15 2-13 8-13 11 6 8 13z"/></symbol><symbol id="i-export" viewBox="0 0 32 32"><path d="M28 22v8H4v-8M16 4v20M8 12l8-8 8 8"/></symbol><symbol id="i-import" viewBox="0 0 32 32"><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></symbol><symbol id="i-inbox" viewBox="0 0 32 32"><path d="M2 15v10h28V15l-4-8H6zm0 0h8s1 5 6 5 6-5 6-5h8"/></symbol><symbol id="i-archive" viewBox="0 0 32 32"><path d="M4 10v18h24V10M2 4v6h28V4zm10 11h8"/></symbol><symbol id="i-reply" viewBox="0 0 32 32"><path d="M10 6l-7 8 7 8m-7-8h15c8 0 12 4 12 12"/></symbol><symbol id="i-edit" viewBox="0 0 32 32"><path d="M30 7l-5-5L5 22l-2 7 7-2zm-9-1l5 5zM5 22l5 5z"/></symbol><symbol id="i-compose" viewBox="0 0 32 32"><path d="M27 15v15H2V5h15m13 1l-4-4L9 19l-2 6 6-2zm-8 0l4 4zM9 19l4 4z"/></symbol><symbol id="i-upload" viewBox="0 0 32 32"><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12-4l5-4 5 4m-5-4v15"/></symbol><symbol id="i-download" viewBox="0 0 32 32"><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></symbol><symbol id="i-send" viewBox="0 0 32 32"><path d="M2 16L30 2 16 30l-4-10zM30 2L12 20"/></symbol><symbol id="i-link" viewBox="0 0 32 32"><path d="M18 8s6-6 9-3 2 7-3 11-8 5-10 1m0 7s-6 6-9 3-2-7 3-11 8-5 10-1"/></symbol><symbol id="i-code" viewBox="0 0 32 32"><path d="M10 9l-7 8 7 8M22 9l7 8-7 8M18 7l-4 20"/></symbol><symbol id="i-lock" viewBox="0 0 32 32"><path d="M5 15v15h22V15zm4 0C9 9 9 5 16 5s7 4 7 10m-7 5v3"/><circle cx="16" cy="24" r="1"/></symbol><symbol id="i-unlock" viewBox="0 0 32 32"><path d="M5 15v15h22V15zm4 0C9 7 9 3 16 3s7 5 7 6m-7 11v3"/><circle cx="16" cy="24" r="1"/></symbol><symbol id="i-bell" viewBox="0 0 32 32"><path d="M8 17c0-5 1-11 8-11s8 6 8 11 3 8 3 8H5s3-3 3-8zm12 8s0 4-4 4-4-4-4-4m4-22v3"/></symbol><symbol id="i-book" viewBox="0 0 32 32"><path d="M16 7S9 1 2 6v22c7-5 14 0 14 0s7-5 14 0V6c-7-5-14 1-14 1zm0 0v21"/></symbol><symbol id="i-calendar" viewBox="0 0 32 32"><path d="M2 6v24h28V6zm0 9h28M7 3v6m6-6v6m6-6v6m6-6v6"/></symbol><symbol id="i-print" viewBox="0 0 32 32"><path d="M7 25H2V9h28v16h-5M7 19v11h18V19zM25 9V2H7v7m15 5h3"/></symbol><symbol id="i-alert" viewBox="0 0 32 32"><path d="M16 3l14 26H2zm0 8v8m0 4v2"/></symbol><symbol id="i-info" viewBox="0 0 32 32"><path d="M16 14v9m0-15v2"/><circle cx="16" cy="16" r="14"/></symbol><symbol id="i-creditcard" viewBox="0 0 32 32"><path d="M2 7v18h28V7zm3 11h4m-4 3h6"/><path d="M2 11v2h28v-2z" fill="currentColor"/></symbol><symbol id="i-cart" viewBox="0 0 32 32"><path d="M6 6h24l-3 13H9m18 4H10L5 2H2"/><circle cx="25" cy="27" r="2"/><circle cx="12" cy="27" r="2"/></symbol><symbol id="i-gift" viewBox="0 0 32 32"><path d="M4 14v16h24V14M2 9v5h28V9zm14 0s-2-9-8-6 8 6 8 6 2-9 8-6-8 6-8 6m0 0v21"/></symbol><symbol id="i-external" viewBox="0 0 32 32"><path d="M14 9H3v20h20V18M18 4h10v10m0-10L14 18"/></symbol><symbol id="i-reload" viewBox="0 0 32 32"><path d="M29 16c0 6-5 13-13 13S3 22 3 16 8 3 16 3c5 0 9 3 11 6m-7 1l7-1 1-7"/></symbol><symbol id="i-ellipsis-horizontal" viewBox="0 0 32 32"><circle cx="7" cy="16" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="25" cy="16" r="2"/></symbol><symbol id="i-ellipsis-vertical" viewBox="0 0 32 32"><circle cx="16" cy="7" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="16" cy="25" r="2"/></symbol><symbol id="i-twitter" viewBox="0 0 64 64"><path stroke-width="0" fill="currentColor" d="M60 16l-6 1 4-5-7 2c-9-10-23 1-19 10C16 24 8 12 8 12s-6 9 4 16l-6-2c0 6 4 10 11 12h-7c4 8 11 8 11 8s-6 5-17 5c33 16 53-14 50-30z"/></symbol><symbol id="i-github" viewBox="0 0 64 64"><path stroke-width="0" fill="currentColor" d="M32 0C14 0 0 14 0 32c0 21 19 30 22 30 2 0 2-1 2-2v-5c-7 2-10-2-11-5 0 0 0-1-2-3-1-1-5-3-1-3 3 0 5 4 5 4 3 4 7 3 9 2 0-2 2-4 2-4-8-1-14-4-14-15 0-4 1-7 3-9 0 0-2-4 0-9 0 0 5 0 9 4 3-2 13-2 16 0 4-4 9-4 9-4 2 7 0 9 0 9 2 2 3 5 3 9 0 11-7 14-14 15 1 1 2 3 2 6v8c0 1 0 2 2 2 3 0 22-9 22-30C64 14 50 0 32 0z"/></symbol></svg>
\ No newline at end of file
diff --git a/dist/bytesize-symbols.svg b/dist/bytesize-symbols.svg
index a1a8cbdc26ebbd660df1c805d943c3e693e8da82..4b72229ae7cc0f48e23adc0f537de8fb0aaf4f16 100644
--- a/dist/bytesize-symbols.svg
+++ b/dist/bytesize-symbols.svg
@@ -9,6 +9,14 @@
<path d="M2 30 L30 2 M30 30 L2 2" />
</symbol>
+ <symbol id="i-plus" viewBox="0 0 32 32">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+ </symbol>
+
+ <symbol id="i-minus" viewBox="0 0 32 32">
+ <path d="M2 16 L30 16" />
+ </symbol>
+
<symbol id="i-play" viewBox="0 0 32 32">
<path d="M10 2 L10 30 24 16 Z" />
</symbol>
@@ -220,11 +228,6 @@
</symbol>
<svg xmlns="http://www.w3.org/2000/svg">
- <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
- <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />
- </symbol>
-
-<svg xmlns="http://www.w3.org/2000/svg">
<path d="M2 20 L12 28 30 4" />
<circle cx="16" cy="11" r="4" />
<path d="M24 15 C21 22 16 30 16 30 16 30 11 22 8 15 5 8 10 2 16 2 22 2 27 8 24 15 Z" />
@@ -267,6 +270,11 @@
</symbol>
<svg xmlns="http://www.w3.org/2000/svg">
+ <symbol id="i-home" viewBox="0 0 32 32">
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+ </symbol>
+
+<svg xmlns="http://www.w3.org/2000/svg">
<path d="M30 10 L16 26 2 10 Z" />
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</symbol>
@@ -290,6 +298,19 @@
</symbol>
<svg xmlns="http://www.w3.org/2000/svg">
+ <symbol id="i-user" viewBox="0 0 32 32">
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
+ </symbol>
+
+ <symbol id="i-calendar" viewBox="0 0 32 32">
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+ </symbol>
+
+ <symbol id="i-print" viewBox="0 0 32 32">
+ <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
+ </symbol>
+
+<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="i-volume" viewBox="0 0 32 32">
<path d="M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25" />
</symbol>
@@ -312,7 +333,7 @@
<symbol id="i-gift" viewBox="0 0 32 32">
<svg xmlns="http://www.w3.org/2000/svg">
- </symbol>
+ <symbol id="i-play" viewBox="0 0 32 32">
<path d="M23 23 L30 30" />
</symbol>
diff --git a/dist/icons/book.svg b/dist/icons/book.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d045dc67531db9e68d5adde2c412b66ce48ed3d
--- /dev/null
+++ b/dist/icons/book.svg
@@ -0,0 +1,3 @@
+<svg id="i-book" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
+</svg>
\ No newline at end of file
diff --git a/dist/icons/calendar.svg b/dist/icons/calendar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f7b0f70c3f566291246b3b9256ab0c0ce35f0728
--- /dev/null
+++ b/dist/icons/calendar.svg
@@ -0,0 +1,3 @@
+<svg id="i-calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+</svg>
\ No newline at end of file
diff --git a/dist/icons/gift.svg b/dist/icons/gift.svg
index ae532a6f22bd306d2e28c26b7fbb4078f8009614..76c884e9930c8aab0f628793a110e058aebf3847 100644
--- a/dist/icons/gift.svg
+++ b/dist/icons/gift.svg
@@ -1,3 +1,3 @@
<svg id="i-gift" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 2 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9" />
+ <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />
</svg>
\ No newline at end of file
diff --git a/dist/icons/minus.svg b/dist/icons/minus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5e34842b09a5bbb794f526761e70ed75a0b957da
--- /dev/null
+++ b/dist/icons/minus.svg
@@ -0,0 +1,3 @@
+<svg id="i-minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 16" />
+</svg>
\ No newline at end of file
diff --git a/dist/icons/plus.svg b/dist/icons/plus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a7d4184e1b5c6aa8eb9a5dd5b8dede7395b6013f
--- /dev/null
+++ b/dist/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg id="i-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+</svg>
\ No newline at end of file
diff --git a/dist/icons/print.svg b/dist/icons/print.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7deac2b9213c5ca2f4c6c01a3431392fa17fffdd
--- /dev/null
+++ b/dist/icons/print.svg
@@ -0,0 +1,3 @@
+<svg id="i-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
+</svg>
\ No newline at end of file
diff --git a/dist/icons/send.svg b/dist/icons/send.svg
new file mode 100644
index 0000000000000000000000000000000000000000..746f339807a8a1043e71db610c84de9b4be4a084
--- /dev/null
+++ b/dist/icons/send.svg
@@ -0,0 +1,3 @@
+<svg id="i-send" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+</svg>
\ No newline at end of file
diff --git a/examples/bytesize-inline.html b/examples/bytesize-inline.html
index d0ccce05463e402f54f327013bbc8f531f191fea..e9265280f25b07a71afa2f32a72d5153f53a7bb6 100644
--- a/examples/bytesize-inline.html
+++ b/examples/bytesize-inline.html
@@ -66,394 +66,416 @@ Inline SVG - 64px
<div>
- <svg id="i-search" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-search" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="14" cy="14" r="12" />
<path d="M23 23 L30 30" />
</svg>
- <svg id="i-close" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-close" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
+ <svg class="i-plus" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+ </svg>
+
+
<style>
+ <path d="M2 16 L30 16" />
+
<title>Bytesize Icons - Inline SVG</title>
+
+ <svg class="i-play" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 2 L10 30 24 16 Z" />
</svg>
- <svg id="i-pause" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-pause" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M23 2 L23 30 M9 2 L9 30" />
</svg>
- <svg id="i-backwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-backwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z" />
</svg>
- body {
+ <div class="header">
<path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" />
</svg>
- <svg id="i-star" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-star" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
- body {
<title>Bytesize Icons - Inline SVG</title>
+<head>
<path d="M2 20 L12 28 30 4" />
</svg>
- <svg id="i-chevron-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 20 L16 8 2 20" />
</svg>
- <svg id="i-chevron-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M12 30 L24 16 12 2" />
</svg>
- color: #3f414e;
+ <title>Bytesize Icons - Inline SVG</title>
+ <style>
<path d="M30 12 L16 24 2 12" />
</svg>
- <svg id="i-chevron-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 30 L8 16 20 2" />
</svg>
+ <div class="header">
color: #3f414e;
- <title>Bytesize Icons - Inline SVG</title>
<path d="M6 10 L16 2 26 10 M16 2 L16 30" />
</svg>
- <svg id="i-arrow-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-arrow-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 6 L30 16 22 26 M30 16 L2 16" />
</svg>
- <svg id="i-arrow-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-arrow-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 22 L16 30 26 22 M16 30 L16 2" />
</svg>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ <h1>Bytesize Icons</h1>
<path d="M10 6 L2 16 10 26 M2 16 L30 16" />
</svg>
- <svg id="i-caret-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 22 L16 6 2 22 Z" />
</svg>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<title>Bytesize Icons - Inline SVG</title>
+ svg {
<path d="M10 30 L26 16 10 2 Z" />
</svg>
- <svg id="i-caret-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
- <svg id="i-caret-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 30 L6 16 22 2 Z" />
</svg>
- <svg id="i-start" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-start" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M8 2 L8 16 22 2 22 30 8 16 8 30" />
</svg>
- <svg id="i-end" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-end" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M24 2 L24 16 10 2 10 30 24 16 24 30" />
</svg>
- text-align: center;
<title>Bytesize Icons - Inline SVG</title>
+ .i-medium div { font-size: 2em; margin: 0 }
<path d="M30 18 L16 5 2 18Z M2 25 L30 25" />
</svg>
- <svg id="i-mute" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-mute" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z" />
</svg>
+ <h1>Bytesize Icons</h1>
text-align: center;
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />
</svg>
- padding: 3em 0;
+ <h3>A tiny style-controlled SVG iconset</h3>
<circle cx="16" cy="16" r="14" />
<path d="M6 6 L26 26" />
</svg>
+ <h3>A tiny style-controlled SVG iconset</h3>
<html>
-
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
- <svg id="i-options" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-options" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29" />
</svg>
- <svg id="i-settings" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-settings" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />
<circle cx="16" cy="16" r="4" />
</svg>
- <svg id="i-heart" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-heart" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />
</svg>
- }
+ <title>Bytesize Icons - Inline SVG</title>
<head>
+ <style>
<circle cx="16" cy="16" r="14" />
<path d="M16 8 L16 16 20 20" />
</svg>
- }
<title>Bytesize Icons - Inline SVG</title>
+ h3 {
<path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />
</svg>
- <svg id="i-msg" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-msg" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
</svg>
- }
+ <h3>A tiny style-controlled SVG iconset</h3>
font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />
<circle cx="10" cy="9" r="3" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
<head>
-<html>
+ text-align: center;
<path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />
<circle cx="16" cy="16" r="5" />
</svg>
- svg {
<title>Bytesize Icons - Inline SVG</title>
+ hr {
<path d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z" />
</svg>
+ </div>
<html>
- h3 {
<path d="M11 25 L11 6 24 3 24 23 M11 13 L24 10" />
<ellipse cx="7" cy="25" rx="4" ry="5" />
<ellipse cx="20" cy="23" rx="4" ry="5" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
+<head>
<path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
-<head>
+
<path d="M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
max-width: 48em;
<path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
- body {
+ <style>
<path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ body {
<path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />
</svg>
-<html>
<title>Bytesize Icons - Inline SVG</title>
+</head>
<path d="M6 2 L6 30 26 30 26 10 18 2 Z M18 2 L18 10 26 10" />
</svg>
-<html>
<title>Bytesize Icons - Inline SVG</title>
-<head>
+<body>
<path d="M2 26 L30 26 30 7 14 7 10 4 2 4 Z M30 12 L2 12" />
</svg>
-<html>
<title>Bytesize Icons - Inline SVG</title>
- <title>Bytesize Icons - Inline SVG</title>
+
<path d="M4 28 L28 28 30 12 14 12 10 8 2 8 Z M28 12 L28 4 4 4 4 8" />
</svg>
-<html>
<title>Bytesize Icons - Inline SVG</title>
- body {
+ <div class="header">
<path d="M30 8 L2 8 2 26 30 26 Z M20 8 C20 8 20 4 16 4 12 4 12 8 12 8 M8 26 L8 8 M24 26 L24 8" />
</svg>
+ <svg class="i-portfolio" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
overflow: visible;
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ text-align: center;
+ <style>
<html>
+
+ <title>Bytesize Icons - Inline SVG</title>
<title>Bytesize Icons - Inline SVG</title>
- text-align: center;
+<head>
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
</svg>
+ <svg class="i-calendar" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+ <style>
<html>
+
+ <svg class="i-print" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
<style>
+<html>
+
+ <svg class="i-eye" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="17" cy="15" r="1" />
<circle cx="16" cy="16" r="6" />
<path d="M2 16 C2 16 7 6 16 6 25 6 30 16 30 16 30 16 25 26 16 26 7 26 2 16 2 16 Z" />
</svg>
- div { margin: 1em }
+ <title>Bytesize Icons - Inline SVG</title>
<title>Bytesize Icons - Inline SVG</title>
+ text-align: center;
<path d="M6 2 L26 2 26 30 16 20 6 30 Z" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
<style>
- body {
<circle cx="24" cy="8" r="2" />
<path d="M2 18 L18 2 30 2 30 14 14 30 Z" />
</svg>
-<html>
+ <title>Bytesize Icons - Inline SVG</title>
<style>
- text-align: center;
+<html>
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
</svg>
- <svg id="i-activity" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-activity" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
</svg>
- <svg id="i-fire" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- .i-large div { font-size: 4em; margin: 0 }
<title>Bytesize Icons - Inline SVG</title>
<style>
-<html>
- <svg id="i-location" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="11" r="4" />
<path d="M24 15 C21 22 16 30 16 30 16 30 11 22 8 15 5 8 10 2 16 2 22 2 27 8 24 15 Z" />
</svg>
- <svg id="i-export" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-export" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 12 L16 4 24 12" />
</svg>
- <svg id="i-import" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-import" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
</svg>
- <svg id="i-inbox" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-inbox" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 15 L2 25 30 25 30 15 26 7 6 7 Z M2 15 L10 15 C10 15 11 20 16 20 21 20 22 15 22 15 L30 15" />
</svg>
-<html>
+ <div class="i-large">
color: #3f414e;
- <title>Bytesize Icons - Inline SVG</title>
<path d="M4 10 L4 28 28 28 28 10 M2 4 L2 10 30 10 30 4 Z M12 15 L20 15" />
</svg>
- <svg id="i-reply" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-reply" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />
</svg>
- <svg id="i-edit" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-edit" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z" />
</svg>
- .i-small div { font-size: 1.5em; margin: 0 }
+ <h4>Inline SVG - 64px</h4>
<path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
</svg>
+ <h4>Inline SVG - 64px</h4>
<html>
- <svg id="i-caret-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 18 L16 14 21 18 M16 14 L16 29" />
</svg>
- .i-small div { font-size: 1.5em; margin: 0 }
<title>Bytesize Icons - Inline SVG</title>
+ <svg id="i-star" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
+ <svg class="i-send" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+ <style>
<html>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+
+ <title>Bytesize Icons - Inline SVG</title>
body {
+ <style>
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</svg>
- <svg id="i-code" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-code" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>
- <svg id="i-lock" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-lock" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
- <svg id="i-unlock" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-unlock" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 7 9 3 16 3 23 3 23 8 23 9 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
-<html>
+ <h4>Inline SVG - 64px</h4>
text-align: center;
- <style>
<path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
</svg>
- .i-large,
+ <title>Bytesize Icons - Inline SVG</title>
color: #3f414e;
<path d="M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25" />
</svg>
+ <div>
<html>
- <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />
<path d="M16 14 L16 23 M16 8 L16 10" />
<circle cx="16" cy="16" r="14" />
</svg>
+ <div>
<head>
-<html>
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>
- .i-medium,
<title>Bytesize Icons - Inline SVG</title>
+ <path d="M20 30 L8 16 20 2" />
<path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />
<circle cx="25" cy="27" r="2" />
<circle cx="12" cy="27" r="2" />
</svg>
- <svg id="i-gift" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-gift" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 2 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9" />
+ <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />
</svg>
- <svg id="i-external" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-external" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18" />
</svg>
- <svg id="i-reload" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-reload" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" />
</svg>
- .i-small { max-width: 50em; margin: 0 auto 2em }
<title>Bytesize Icons - Inline SVG</title>
+ <svg id="i-arrow-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="7" cy="16" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="25" cy="16" r="2" />
</svg>
- <svg id="i-ellipsis-vertical" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-ellipsis-vertical" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="7" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="16" cy="25" r="2" />
</svg>
- <svg id="i-twitter" viewBox="0 0 64 64" width="64" height="64">
+ <svg class="i-twitter" viewBox="0 0 64 64" width="64" height="64">
<path stroke-width="0" fill="currentColor" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />
</svg>
- <svg id="i-github" viewBox="0 0 64 64" width="64" height="64">
+ <svg class="i-github" viewBox="0 0 64 64" width="64" height="64">
<path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
</svg>
</div>
@@ -465,407 +489,425 @@ Inline SVG - 32px
<div>
- h1 {
+ <title>Bytesize Icons - Inline SVG</title>
font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+<head>
<circle cx="14" cy="14" r="12" />
<path d="M23 23 L30 30" />
</svg>
- <svg id="i-close" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-close" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
-<head>
+ <svg class="i-plus" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+ </svg>
+ <svg class="i-minus" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M2 16 L30 16" />
+ </svg>
+
+ <svg class="i-play" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 2 L10 30 24 16 Z" />
</svg>
- <svg id="i-pause" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-pause" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M23 2 L23 30 M9 2 L9 30" />
</svg>
- <svg id="i-backwards" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-backwards" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z" />
</svg>
- <svg id="i-forwards" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-forwards" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" />
</svg>
- font-weight: normal;
<title>Bytesize Icons - Inline SVG</title>
+ <svg id="i-start" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
- <svg id="i-checkmark" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-checkmark" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 20 L12 28 30 4" />
</svg>
+ <circle cx="14" cy="14" r="12" />
<head>
- </style>
<path d="M30 20 L16 8 2 20" />
</svg>
-<head>
+ <circle cx="14" cy="14" r="12" />
- color: #3f414e;
<path d="M12 30 L24 16 12 2" />
</svg>
- <svg id="i-chevron-bottom" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-bottom" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 12 L16 24 2 12" />
</svg>
- font-weight: normal;
+ <title>Bytesize Icons - Inline SVG</title>
text-align: center;
+ <style>
<path d="M20 30 L8 16 20 2" />
</svg>
-<head>
<title>Bytesize Icons - Inline SVG</title>
+ <svg id="i-mute" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 10 L16 2 26 10 M16 2 L16 30" />
</svg>
-<head>
<title>Bytesize Icons - Inline SVG</title>
-<html>
+ <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z" />
<path d="M22 6 L30 16 22 26 M30 16 L2 16" />
</svg>
-<head>
<title>Bytesize Icons - Inline SVG</title>
-<head>
+ <svg id="i-volume" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 22 L16 30 26 22 M16 30 L16 2" />
</svg>
-<head>
<title>Bytesize Icons - Inline SVG</title>
-
+ <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />
<path d="M10 6 L2 16 10 26 M2 16 L30 16" />
</svg>
- <svg id="i-caret-top" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-top" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 22 L16 6 2 22 Z" />
</svg>
- line-height: 1;
<style>
+<html>
<path d="M10 30 L26 16 10 2 Z" />
</svg>
+ <path d="M23 23 L30 30" />
<head>
- <h4>Inline SVG - 64px</h4>
<path d="M30 10 L16 26 2 10 Z" />
</svg>
- <svg id="i-caret-left" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-left" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 30 L6 16 22 2 Z" />
</svg>
-<head>
+ <path d="M23 23 L30 30" />
<title>Bytesize Icons - Inline SVG</title>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M8 2 L8 16 22 2 22 30 8 16 8 30" />
</svg>
- <svg id="i-end" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-end" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M24 2 L24 16 10 2 10 30 24 16 24 30" />
</svg>
-<head>
<path d="M23 23 L30 30" />
+ body {
<path d="M30 18 L16 5 2 18Z M2 25 L30 25" />
</svg>
-<head>
<style>
-<html>
+ color: #3f414e;
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z" />
</svg>
-<head>
<style>
-<head>
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />
</svg>
-<head>
<style>
-
+ text-align: center;
<circle cx="16" cy="16" r="14" />
<path d="M6 6 L26 26" />
</svg>
-<head>
<style>
- <title>Bytesize Icons - Inline SVG</title>
+ padding: 3em 0;
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
- font-size: 2em;
<style>
+ }
<path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29" />
</svg>
-<head>
<style>
- body {
+ svg {
<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />
<circle cx="16" cy="16" r="4" />
</svg>
-<head>
<style>
- color: #3f414e;
+ margin: 0.4em;
<path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />
</svg>
-<head>
<style>
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ overflow: visible;
<circle cx="16" cy="16" r="14" />
<path d="M16 8 L16 16 20 20" />
</svg>
-<head>
<style>
- text-align: center;
+ div { margin: 1em }
<path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />
</svg>
-<head>
+ </svg>
body {
<path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
</svg>
- h3 {
+ <style>
<html>
+ color: #3f414e;
<path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />
<circle cx="10" cy="9" r="3" />
</svg>
- <svg id="i-camera" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-camera" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />
<circle cx="16" cy="16" r="5" />
</svg>
- <svg id="i-video" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-video" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z" />
</svg>
+ <style>
<head>
- <svg id="i-checkmark" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M11 25 L11 6 24 3 24 23 M11 13 L24 10" />
<ellipse cx="7" cy="25" rx="4" ry="5" />
<ellipse cx="20" cy="23" rx="4" ry="5" />
</svg>
- h3 {
<style>
+ .i-small { max-width: 50em; margin: 0 auto 2em }
<path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
</svg>
+ <style>
<head>
- <svg id="i-chevron-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+<head>
<path d="M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z" />
</svg>
+ <style>
<head>
- <path d="M30 20 L16 8 2 20" />
+
<path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />
</svg>
+ <style>
<head>
- <svg id="i-chevron-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <title>Bytesize Icons - Inline SVG</title>
<path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
</svg>
+ <style>
<head>
- <path d="M12 30 L24 16 12 2" />
+ <style>
<path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />
</svg>
+ <style>
<head>
- <svg id="i-chevron-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ body {
<path d="M6 2 L6 30 26 30 26 10 18 2 Z M18 2 L18 10 26 10" />
</svg>
+ <style>
font-size: 1em;
-<html>
<path d="M2 26 L30 26 30 7 14 7 10 4 2 4 Z M30 12 L2 12" />
</svg>
- font-size: 1em;
+ <style>
<head>
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M4 28 L28 28 30 12 14 12 10 8 2 8 Z M28 12 L28 4 4 4 4 8" />
</svg>
+ <style>
<head>
- <path d="M20 30 L8 16 20 2" />
+ text-align: center;
<path d="M30 8 L2 8 2 26 30 26 Z M20 8 C20 8 20 4 16 4 12 4 12 8 12 8 M8 26 L8 8 M24 26 L24 8" />
</svg>
- <svg id="i-portfolio" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-portfolio" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M29 17 L29 28 3 28 3 17 M2 8 L30 8 30 16 C30 16 24 20 16 20 8 20 2 16 2 16 L2 8 Z M16 22 L16 18 M20 8 C20 8 20 4 16 4 12 4 12 8 12 8" />
</svg>
+ <svg class="i-book" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
+ </svg>
+
+ <path d="M2 30 L30 2 M30 30 L2 2" />
<head>
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+ </svg>
+
+ <svg class="i-print" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <hr />
color: #3f414e;
<style>
+<html>
+
+ <svg class="i-eye" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="17" cy="15" r="1" />
<circle cx="16" cy="16" r="6" />
<path d="M2 16 C2 16 7 6 16 6 25 6 30 16 30 16 30 16 25 26 16 26 7 26 2 16 2 16 Z" />
</svg>
- <svg id="i-bookmark" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-bookmark" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 2 L26 2 26 30 16 20 6 30 Z" />
</svg>
- <svg id="i-tag" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-tag" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="24" cy="8" r="2" />
<path d="M2 18 L18 2 30 2 30 14 14 30 Z" />
</svg>
-<head>
+ <path d="M2 30 L30 2 M30 30 L2 2" />
color: #3f414e;
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
</svg>
- <svg id="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
<style>
-<html>
-<head>
font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
.i-large div { font-size: 4em; margin: 0 }
- <title>Bytesize Icons - Inline SVG</title>
+<head>
</svg>
- <svg id="i-location" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-location" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="11" r="4" />
<path d="M24 15 C21 22 16 30 16 30 16 30 11 22 8 15 5 8 10 2 16 2 22 2 27 8 24 15 Z" />
</svg>
- <svg id="i-export" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-export" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 12 L16 4 24 12" />
</svg>
- <svg id="i-import" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-import" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
</svg>
- margin: 0 0 2em;
+ <style>
<title>Bytesize Icons - Inline SVG</title>
+<head>
<path d="M2 15 L2 25 30 25 30 15 26 7 6 7 Z M2 15 L10 15 C10 15 11 20 16 20 21 20 22 15 22 15 L30 15" />
</svg>
- margin: 0 0 2em;
<style>
+ </div>
<path d="M4 10 L4 28 28 28 28 10 M2 4 L2 10 30 10 30 4 Z M12 15 L20 15" />
</svg>
- <svg id="i-reply" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-reply" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />
</svg>
- <svg id="i-edit" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-edit" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z" />
</svg>
- <svg id="i-compose" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-compose" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
</svg>
- <svg id="i-upload" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-upload" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 18 L16 14 21 18 M16 14 L16 29" />
</svg>
- <svg id="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
-<head>
+ <svg id="i-play" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
text-align: center;
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+ <style>
<html>
+
+ <svg class="i-link" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</svg>
- <svg id="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>
+ <path d="M10 2 L10 30 24 16 Z" />
<head>
- <path d="M24 2 L24 16 10 2 10 30 24 16 24 30" />
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
- <svg id="i-unlock" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-unlock" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 7 9 3 16 3 23 3 23 8 23 9 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
- font-weight: 600;
+ <style>
<style>
+ <title>Bytesize Icons - Inline SVG</title>
<path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
</svg>
- <svg id="i-alert" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-alert" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25" />
</svg>
- <svg id="i-info" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-info" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 14 L16 23 M16 8 L16 10" />
<circle cx="16" cy="16" r="14" />
</svg>
- <svg id="i-creditcard" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-creditcard" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>
- <svg id="i-cart" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-cart" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />
<circle cx="25" cy="27" r="2" />
<circle cx="12" cy="27" r="2" />
</svg>
- <svg id="i-gift" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- .i-medium,
+ <path d="M10 2 L10 30 24 16 Z" />
text-align: center;
+ <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />
</svg>
-
+ <svg id="i-pause" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
-<html>
<path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18" />
</svg>
- <svg id="i-reload" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-reload" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" />
</svg>
- <svg id="i-ellipsis-horizontal" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-ellipsis-horizontal" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="7" cy="16" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="25" cy="16" r="2" />
</svg>
+ <svg id="i-pause" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <title>Bytesize Icons - Inline SVG</title>
<circle cx="16" cy="7" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="16" cy="25" r="2" />
</svg>
- hr {
<style>
+ <svg id="i-checkmark" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path stroke-width="0" fill="currentColor" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />
</svg>
- hr {
+ <style>
body {
+ <style>
<path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
</svg>
</div>
@@ -876,399 +920,424 @@ Inline SVG - 24px
<div>
- <svg id="i-search" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-search" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="14" cy="14" r="12" />
<path d="M23 23 L30 30" />
</svg>
+ <svg class="i-close" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <style>
+ <style>
<html>
+
<style>
+ <svg id="i-chevron-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+ </svg>
<style>
-<html>
+ <path d="M12 30 L24 16 12 2" />
+ <path d="M2 16 L30 16" />
+ <svg id="i-eject" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- }
+ <svg class="i-play" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 2 L10 30 24 16 Z" />
</svg>
-
+ <path d="M23 2 L23 30 M9 2 L9 30" />
<html>
-<head>
<path d="M23 2 L23 30 M9 2 L9 30" />
</svg>
- <svg id="i-backwards" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-backwards" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z" />
</svg>
+ <path d="M23 2 L23 30 M9 2 L9 30" />
- overflow: visible;
<path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" />
</svg>
- border: 0 solid transparent;
<style>
+ <svg id="i-arrow-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
- <svg id="i-checkmark" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-checkmark" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 20 L12 28 30 4" />
</svg>
- border: 0 solid transparent;
+ <style>
color: #3f414e;
+ body {
<path d="M30 20 L16 8 2 20" />
</svg>
- <svg id="i-chevron-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M12 30 L24 16 12 2" />
</svg>
- <svg id="i-chevron-bottom" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-bottom" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 12 L16 24 2 12" />
</svg>
- <svg id="i-chevron-left" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-chevron-left" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 30 L8 16 20 2" />
</svg>
- <svg id="i-arrow-top" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-arrow-top" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 10 L16 2 26 10 M16 2 L16 30" />
</svg>
- <svg id="i-arrow-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-arrow-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 6 L30 16 22 26 M30 16 L2 16" />
</svg>
-
+ <svg id="i-backwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<head>
-
<path d="M6 22 L16 30 26 22 M16 30 L16 2" />
</svg>
+ <svg id="i-backwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- line-height: 1;
<path d="M10 6 L2 16 10 26 M2 16 L30 16" />
</svg>
- border-bottom: 5px solid #ddd;
<style>
+ <svg id="i-caret-right" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 22 L16 6 2 22 Z" />
</svg>
- <svg id="i-caret-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-right" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M10 30 L26 16 10 2 Z" />
</svg>
- <svg id="i-caret-bottom" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-caret-bottom" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
- border-bottom: 5px solid #ddd;
+ <style>
font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ color: #3f414e;
<path d="M22 30 L6 16 22 2 Z" />
</svg>
- <svg id="i-start" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-start" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M8 2 L8 16 22 2 22 30 8 16 8 30" />
</svg>
- <svg id="i-end" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-end" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M24 2 L24 16 10 2 10 30 24 16 24 30" />
</svg>
- <svg id="i-eject" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-eject" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M30 18 L16 5 2 18Z M2 25 L30 25" />
</svg>
- <svg id="i-mute" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-mute" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z" />
</svg>
- <svg id="i-volume" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-volume" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />
</svg>
+ <path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z" />
- max-width: 48em;
<circle cx="16" cy="16" r="14" />
<path d="M6 6 L26 26" />
</svg>
- height: 0;
<style>
+ <svg id="i-eject" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />
</svg>
- <svg id="i-options" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-options" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29" />
</svg>
- <svg id="i-settings" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-settings" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />
<circle cx="16" cy="16" r="4" />
</svg>
- <svg id="i-heart" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-heart" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />
</svg>
- height: 0;
+ <style>
text-align: center;
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<circle cx="16" cy="16" r="14" />
<path d="M16 8 L16 16 20 20" />
</svg>
- <svg id="i-menu" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-menu" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />
</svg>
- <svg id="i-msg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-msg" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
</svg>
- <svg id="i-photo" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-photo" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />
<circle cx="10" cy="9" r="3" />
</svg>
- <svg id="i-camera" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-camera" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />
<circle cx="16" cy="16" r="5" />
</svg>
+ <svg id="i-forwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <hr />
<path d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z" />
</svg>
-
+ <svg id="i-forwards" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<title>Bytesize Icons - Inline SVG</title>
- <style>
<path d="M11 25 L11 6 24 3 24 23 M11 13 L24 10" />
<ellipse cx="7" cy="25" rx="4" ry="5" />
<ellipse cx="20" cy="23" rx="4" ry="5" />
</svg>
- max-width: 48em;
body {
+ <style>
<path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
</svg>
- <svg id="i-home" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-home" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z" />
</svg>
- <svg id="i-user" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-user" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />
</svg>
- <svg id="i-trash" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-trash" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />
</svg>
- margin: 4em auto;
+ body {
+ text-align: center;
<path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />
</svg>
- margin: 4em auto;
+ body {
<html>
<path d="M6 2 L6 30 26 30 26 10 18 2 Z M18 2 L18 10 26 10" />
</svg>
- <svg id="i-folder" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-folder" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 26 L30 26 30 7 14 7 10 4 2 4 Z M30 12 L2 12" />
</svg>
- <svg id="i-folder-open" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-folder-open" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M4 28 L28 28 30 12 14 12 10 8 2 8 Z M28 12 L28 4 4 4 4 8" />
</svg>
+ <path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" />
+ <path d="M30 8 L2 8 2 26 30 26 Z M20 8 C20 8 20 4 16 4 12 4 12 8 12 8 M8 26 L8 8 M24 26 L24 8" />
<style>
+<html>
+
+ <path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" />
<title>Bytesize Icons - Inline SVG</title>
overflow: visible;
- color: #3f414e;
+ text-align: center;
</svg>
+ <svg class="i-book" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <hr />
<style>
+<html>
+
+ <svg class="i-calendar" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <hr />
<style>
+ <style>
<html>
+
+ <svg class="i-print" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <title>Bytesize Icons - Inline SVG</title>
<title>Bytesize Icons - Inline SVG</title>
- text-align: center;
+ color: #3f414e;
</svg>
- margin: 4em auto;
body {
+ .i-small div { font-size: 1.5em; margin: 0 }
<circle cx="17" cy="15" r="1" />
<circle cx="16" cy="16" r="6" />
<path d="M2 16 C2 16 7 6 16 6 25 6 30 16 30 16 30 16 25 26 16 26 7 26 2 16 2 16 Z" />
</svg>
- <svg id="i-bookmark" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-bookmark" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 2 L26 2 26 30 16 20 6 30 Z" />
</svg>
- <svg id="i-tag" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-tag" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="24" cy="8" r="2" />
<path d="M2 18 L18 2 30 2 30 14 14 30 Z" />
</svg>
- <svg id="i-lightning" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-lightning" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
</svg>
-
body {
+ h1 {
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
</svg>
-
body {
-<html>
- <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />
- </svg>
+<head>
- <svg id="i-location" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="11" r="4" />
<path d="M24 15 C21 22 16 30 16 30 16 30 11 22 8 15 5 8 10 2 16 2 22 2 27 8 24 15 Z" />
</svg>
-
body {
-
+ line-height: 1;
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 12 L16 4 24 12" />
</svg>
-
body {
- <title>Bytesize Icons - Inline SVG</title>
+ font-size: 2em;
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
</svg>
-
body {
- <style>
+ h3 {
<path d="M2 15 L2 25 30 25 30 15 26 7 6 7 Z M2 15 L10 15 C10 15 11 20 16 20 21 20 22 15 22 15 L30 15" />
</svg>
-
body {
- body {
+ font-size: 1em;
<path d="M4 10 L4 28 28 28 28 10 M2 4 L2 10 30 10 30 4 Z M12 15 L20 15" />
</svg>
-
body {
- color: #3f414e;
+ margin: 0 0 2em;
<path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />
</svg>
-
body {
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ font-weight: 600;
<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z" />
</svg>
-
body {
- text-align: center;
+ hr {
<path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
</svg>
+ body {
- <svg id="i-chevron-bottom" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+<html>
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 18 L16 14 21 18 M16 14 L16 29" />
</svg>
+ body {
- <path d="M30 12 L16 24 2 12" />
+<head>
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
+ body {
- <svg id="i-chevron-left" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+ </svg>
+
+ <svg class="i-link" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</svg>
-</head>
+ body {
+ <style>
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>
+ body {
- <svg id="i-arrow-top" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ body {
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
+ body {
</head>
- <style>
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 7 9 3 16 3 23 3 23 8 23 9 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
-</head>
body {
+<body>
<path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
</svg>
+ body {
- <path d="M22 6 L30 16 22 26 M30 16 L2 16" />
+ text-align: center;
<path d="M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25" />
</svg>
- <svg id="i-info" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-info" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 14 L16 23 M16 8 L16 10" />
<circle cx="16" cy="16" r="14" />
</svg>
- <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>
- <svg id="i-cart" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-cart" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />
<circle cx="25" cy="27" r="2" />
<circle cx="12" cy="27" r="2" />
</svg>
+ <svg id="i-checkmark" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
- <path d="M10 6 L2 16 10 26 M2 16 L30 16" />
- <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 2 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9" />
+ <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />
</svg>
- <svg id="i-external" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-external" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18" />
</svg>
- <svg id="i-reload" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-reload" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" />
</svg>
-<body>
+ body {
<title>Bytesize Icons - Inline SVG</title>
+ body {
<circle cx="7" cy="16" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="25" cy="16" r="2" />
</svg>
- <svg id="i-ellipsis-vertical" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
+ <svg class="i-ellipsis-vertical" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<circle cx="16" cy="7" r="2" />
<circle cx="16" cy="16" r="2" />
<circle cx="16" cy="25" r="2" />
</svg>
-<body>
body {
+ <svg id="i-search" viewBox="0 0 32 32" width="64" height="64" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path stroke-width="0" fill="currentColor" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />
</svg>
- <svg id="i-github" viewBox="0 0 64 64" width="24" height="24">
+ <svg class="i-github" viewBox="0 0 64 64" width="24" height="24">
<path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
</svg>
</div>
diff --git a/examples/bytesize-symbols.html b/examples/bytesize-symbols.html
index bb38000affd6b8b9c98386a4715f81a676f28c1d..7e0c01dec35ae30b12a5c0418b56802b094ed635 100644
--- a/examples/bytesize-symbols.html
+++ b/examples/bytesize-symbols.html
@@ -76,6 +76,14 @@
<path d="M2 30 L30 2 M30 30 L2 2" />
</symbol>
+ <symbol id="i-plus" viewBox="0 0 32 32">
+ <path d="M16 2 L16 30 M2 16 L30 16" />
+ </symbol>
+
+ <symbol id="i-minus" viewBox="0 0 32 32">
+ <path d="M2 16 L30 16" />
+ </symbol>
+
<symbol id="i-play" viewBox="0 0 32 32">
<path d="M10 2 L10 30 24 16 Z" />
</symbol>
@@ -264,6 +272,19 @@
</symbol>
<html>
+ <symbol id="i-mute" viewBox="0 0 32 32">
+ <path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
+ </symbol>
+
+ <symbol id="i-book" viewBox="0 0 32 32">
+ <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />
+ </symbol>
+
+ <symbol id="i-calendar" viewBox="0 0 32 32">
+ <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />
+ </symbol>
+
+<html>
<path d="M23 23 L30 30" />
<circle cx="17" cy="15" r="1" />
<circle cx="16" cy="16" r="6" />
@@ -285,10 +306,6 @@
<symbol id="i-activity" viewBox="0 0 32 32">
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
- </symbol>
-
- <symbol id="i-fire" viewBox="0 0 32 32">
- <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />
</symbol>
<symbol id="i-location" viewBox="0 0 32 32">
@@ -332,6 +349,10 @@
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</symbol>
+ <symbol id="i-send" viewBox="0 0 32 32">
+ <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
+ </symbol>
+
<symbol id="i-link" viewBox="0 0 32 32">
<path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
</symbol>
@@ -350,8 +371,8 @@
<circle cx="16" cy="24" r="1" />
</symbol>
- <symbol id="i-bell" viewBox="0 0 32 32">
+ <symbol id="i-print" viewBox="0 0 32 32">
- <path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />
+ <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</symbol>
<symbol id="i-alert" viewBox="0 0 32 32">
@@ -375,7 +396,7 @@
</symbol>
<symbol id="i-gift" viewBox="0 0 32 32">
- <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 2 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9" />
+ <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />
</symbol>
<symbol id="i-external" viewBox="0 0 32 32">
@@ -423,6 +444,8 @@
<div>
<svg class="i"><use xlink:href="#i-search" /></svg>
<svg class="i"><use xlink:href="#i-close" /></svg>
+ <svg class="i"><use xlink:href="#i-plus" /></svg>
+ <svg class="i"><use xlink:href="#i-minus" /></svg>
<svg class="i"><use xlink:href="#i-play" /></svg>
<svg class="i"><use xlink:href="#i-pause" /></svg>
<svg class="i"><use xlink:href="#i-backwards" /></svg>
@@ -475,7 +498,6 @@
<svg class="i"><use xlink:href="#i-location" /></svg>
<svg class="i"><use xlink:href="#i-activity" /></svg>
.i-small { max-width: 50em; margin: 0 auto 2em }
- .i-small { max-width: 50em; margin: 0 auto 2em }
<html>
<svg class="i"><use xlink:href="#i-import" /></svg>
<svg class="i"><use xlink:href="#i-inbox" /></svg>
@@ -486,11 +508,17 @@
<svg class="i"><use xlink:href="#i-upload" /></svg>
<svg class="i"><use xlink:href="#i-download" /></svg>
+ border: 0 solid transparent;
+
<svg class="i"><use xlink:href="#i-code" /></svg>
<svg class="i"><use xlink:href="#i-lock" /></svg>
<svg class="i"><use xlink:href="#i-unlock" /></svg>
<svg class="i"><use xlink:href="#i-bell" /></svg>
+ border-bottom: 5px solid #ddd;
+ <svg class="i"><use xlink:href="#i-calendar" /></svg>
+ <svg class="i"><use xlink:href="#i-print" /></svg>
+
<style>
<svg class="i"><use xlink:href="#i-info" /></svg>
<svg class="i"><use xlink:href="#i-creditcard" /></svg>
@@ -515,6 +543,9 @@
<div>
<svg class="i"><use xlink:href="#i-search" /></svg>
<head>
+ hr {
+ <svg class="i"><use xlink:href="#i-plus" /></svg>
+
hr {
<svg class="i"><use xlink:href="#i-play" /></svg>
<svg class="i"><use xlink:href="#i-pause" /></svg>
@@ -566,10 +597,10 @@
<svg class="i"><use xlink:href="#i-tag" /></svg>
<svg class="i"><use xlink:href="#i-lightning" /></svg>
.i-medium,
- text-align: center;
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
<head>
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
text-align: center;
- <svg class="i"><use xlink:href="#i-location" /></svg>
<svg class="i"><use xlink:href="#i-export" /></svg>
<svg class="i"><use xlink:href="#i-import" /></svg>
<svg class="i"><use xlink:href="#i-inbox" /></svg>
@@ -580,10 +611,15 @@
<svg class="i"><use xlink:href="#i-upload" /></svg>
<svg class="i"><use xlink:href="#i-download" /></svg>
+ border: 0 solid transparent;
+
<svg class="i"><use xlink:href="#i-code" /></svg>
<svg class="i"><use xlink:href="#i-lock" /></svg>
<svg class="i"><use xlink:href="#i-unlock" /></svg>
<svg class="i"><use xlink:href="#i-bell" /></svg>
+ <svg class="i"><use xlink:href="#i-book" /></svg>
+ <svg class="i"><use xlink:href="#i-calendar" /></svg>
+ <svg class="i"><use xlink:href="#i-print" /></svg>
<svg class="i"><use xlink:href="#i-alert" /></svg>
<svg class="i"><use xlink:href="#i-info" /></svg>
<svg class="i"><use xlink:href="#i-creditcard" /></svg>
@@ -608,6 +644,8 @@
<div>
<svg class="i"><use xlink:href="#i-search" /></svg>
<svg class="i"><use xlink:href="#i-close" /></svg>
+ <svg class="i"><use xlink:href="#i-plus" /></svg>
+ <svg class="i"><use xlink:href="#i-minus" /></svg>
<svg class="i"><use xlink:href="#i-play" /></svg>
<svg class="i"><use xlink:href="#i-pause" /></svg>
<svg class="i"><use xlink:href="#i-backwards" /></svg>
@@ -658,10 +696,9 @@
<svg class="i"><use xlink:href="#i-tag" /></svg>
<svg class="i"><use xlink:href="#i-lightning" /></svg>
.i-medium,
- text-align: center;
- <svg class="i"><use xlink:href="#i-fire" /></svg>
+ font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
.i-medium,
- font-family: "Avenir Next", Avenir, Segoe UI, "Helvetica Neue", helvetica, sans-serif;
+ text-align: center;
<svg class="i"><use xlink:href="#i-export" /></svg>
<svg class="i"><use xlink:href="#i-import" /></svg>
<svg class="i"><use xlink:href="#i-inbox" /></svg>
@@ -671,12 +708,17 @@
<svg class="i"><use xlink:href="#i-compose" /></svg>
<svg class="i"><use xlink:href="#i-upload" /></svg>
.i-small { max-width: 50em; margin: 0 auto 2em }
+ text-align: center;
+ font-size: 2em;
text-align: center;
<svg class="i"><use xlink:href="#i-link" /></svg>
<svg class="i"><use xlink:href="#i-code" /></svg>
<svg class="i"><use xlink:href="#i-lock" /></svg>
<svg class="i"><use xlink:href="#i-unlock" /></svg>
<svg class="i"><use xlink:href="#i-bell" /></svg>
+ <svg class="i"><use xlink:href="#i-book" /></svg>
+ <svg class="i"><use xlink:href="#i-calendar" /></svg>
+ <svg class="i"><use xlink:href="#i-print" /></svg>
<svg class="i"><use xlink:href="#i-alert" /></svg>
<svg class="i"><use xlink:href="#i-info" /></svg>
<svg class="i"><use xlink:href="#i-creditcard" /></svg>
