https://github.com/danklammer/bytesize-icons
Tiny style-controlled SVG iconset (101 icons, 12kb)
https://github.com/danklammer/bytesize-icons
icon-set icons iconset inline-svg lightweight svg svg-icons web
Last synced: about 1 year ago
JSON representation
Tiny style-controlled SVG iconset (101 icons, 12kb)
- Host: GitHub
- URL: https://github.com/danklammer/bytesize-icons
- Owner: danklammer
- License: mit
- Created: 2015-07-15T08:51:51.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2022-10-10T12:44:37.000Z (over 3 years ago)
- Last Synced: 2024-08-01T02:32:33.210Z (over 1 year ago)
- Topics: icon-set, icons, iconset, inline-svg, lightweight, svg, svg-icons, web
- Homepage: https://danklammer.com/bytesize-icons/
- Size: 3.7 MB
- Stars: 3,847
- Watchers: 77
- Forks: 228
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-design - bytesize-icons - controlled SVG iconset (92 icons, 10kb) (SVG Icons)
- awesome-starred - danklammer/bytesize-icons - Tiny style-controlled SVG iconset (101 icons, 12kb) (web)
- awesome-icons - Byte Size Icons - Tiny style-controlled SVG iconset. ([Website](https://danklammer.com/bytesize-icons)) (General)
README
# Bytesize Icons
### A tiny style-controlled SVG iconset
Each icon is hand-coded along a 32x32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square. [See demo](https://danklammer.com/articles/svg-stroke-ftw/#give-it-a-spin).
All 101 icons weigh in at 11.7kb minified (3.2kb in SVGZ).
[Used](https://getbootstrap.com/) and [recommended](https://getbootstrap.com/docs/4.4/extend/icons/) by Bootstrap.
## Usage
Either drop each icon inline directly in your page as-needed, or loaded them up via external `.svg` file and the `use` tag. ([Learn more about using an external SVG reference.](https://css-tricks.com/svg-use-with-external-reference-take-2/)).
You can then easily change the weight of the icon by changing `stroke-width` attribute. You can also change the shape of the line caps and the line joins with `stroke-linecap` and `stroke-linejoin`. This will change the style of the icons by making them rounded or squared off. All these stroke properties are also available to use in CSS.
### Recommended Styles
Style | stroke-linejoin | stroke-linecap
-------|-----------------|----------------
Round | round | round
Bevel | bevel | butt
Miter | miter | butt
### Recommended Weights
Weight | stroke-width (px) | stroke-width (%)
--------------|-------------------|----------------
Ultra Light | 0.5px | 1.5625%
Thin | 1px | 3.125%
Light | 1.5px | 4.6875%
Regular | 2px | 6.25%
Medium | 2.5px | 7.8125%
Bold | 3px | 9.375%
Heavy | 3.5px | 10.9375%
### Examples
- [Inline SVG (64px, 32px, 24px)](https://cdn.rawgit.com/danklammer/bytesize-icons/master/examples/bytesize-inline.html)
- [SVG Symbols and the Use tag (64px, 32px, 24px)](https://cdn.rawgit.com/danklammer/bytesize-icons/master/examples/bytesize-symbols.html)
- [All Styles and Weights](https://cdn.rawgit.com/danklammer/bytesize-icons/master/examples/bytesize-styles.html)
### Limitations
Since there is a 2px margin between the paths and `viewBox`, I recommend not having a `stroke-width` larger than **4px** (or **12.5%**). 4px might seems small but it's relative to the 32x32 grid.
Make sure you use `stroke-width` in increments of **0.5px** or **1.5625%**, along with size (height/width) increments of **24px**, **32px**, **48px**, **64px**. This allows for optimal pixel-hinting.
If you decide to use a larger `stroke-width` with `stroke-linejoin: miter` (Squared off style), I recommend using `overflow: visible` just in case the linecap edge falls just outside the `viewBox`. This prevents any of the points of the icon from getting cut off.
## Design Files
- [Bytesize .iconjar Set](https://github.com/danklammer/bytesize-icons/blob/master/design/bytesize-iconjar.zip?raw=true)
## Forks & Extensions
- [Bytesize Icons as React Components](https://github.com/abdelhai/react-bytesize-icons) by [Mustafa Abdelhai](https://github.com/abdelhai/)
- [Yet Another Bytesize Icons as React Component](https://github.com/rhysd/react-component-bytesize-icons) by [@rhysd](https://github.com/rhysd)
- [Bytesize Icons as Custom Elements](https://github.com/rhysd/bytesize-icon-elements) by [@rhysd](https://github.com/rhysd)
- [Bytesize Icons as Vue functional components](https://github.com/egoist/vue-bytesize-icons) by [@egoist](https://github.com/egoist)
- [Bytesize Icons packaged as a Jinja2 macro](https://github.com/encukou/bytesize-to-jinja) by [@encukou](https://github.com/encukou)
- [Atom SVG Icons](https://github.com/idleberg/atom-svg-icons) by [@idleberg](https://github.com/idleberg)
- [VSCode SVG Icons](https://github.com/idleberg/vscode-svg-icons) by [@idleberg](https://github.com/idleberg)
## File Size
16.3 KB | 11.7 KB | 3.2 KB
--------|----------|-------
Raw | Minified | SVGZ
## Grab-n-Go
| **Search**
---|---
```html
```
---
| **Close**
---|---
```html
```
---
| **Plus**
---|---
```html
```
---
| **Minus**
---|---
```html
```
---
| **Play**
---|---
```html
```
---
| **Pause**
---|---
```html
```
---
| **Backwards**
---|---
```html
```
---
| **Forwards**
---|---
```html
```
---
| **Move**
---|---
```html
```
---
| **Zoom In**
---|---
```html
```
---
| **Zoom Out**
---|---
```html
```
---
| **Zoom Reset**
---|---
```html
```
---
| **Fullscreen**
---|---
```html
```
---
| **Fullscreen Exit**
---|---
```html
```
---
| **Star**
---|---
```html
```
---
| **Checkmark**
---|---
```html
```
---
| **Chevron Top**
---|---
```html
```
---
| **Chevron Right**
---|---
```html
```
---
| **Chevron Bottom**
---|---
```html
```
---
| **Chevron Left**
---|---
```html
```
---
| **Arrow Top**
---|---
```html
```
---
| **Arrow Right**
---|---
```html
```
---
| **Arrow Bottom**
---|---
```html
```
---
| **Arrow Left**
---|---
```html
```
---
| **Caret Top**
---|---
```html
```
---
| **Caret Right**
---|---
```html
```
---
| **Caret Bottom**
---|---
```html
```
---
| **Caret Left**
---|---
```html
```
---
| **Start**
---|---
```html
```
---
| **End**
---|---
```html
```
---
| **Eject**
---|---
```html
```
---
| **Mute**
---|---
```html
```
---
| **Volume**
---|---
```html
```
---
| **Ban**
---|---
```html
```
---
| **Flag**
---|---
```html
```
---
| **Options**
---|---
```html
```
---
| **Settings**
---|---
```html
```
---
| **Heart**
---|---
```html
```
---
| **Clock**
---|---
```html
```
---
| **Menu**
---|---
```html
```
---
| **Message**
---|---
```html
```
---
| **Photo**
---|---
```html
```
---
| **Camera**
---|---
```html
```
---
| **Video**
---|---
```html
```
---
| **Music**
---|---
```html
```
---
| **Mail**
---|---
```html
```
---
| **Home**
---|---
```html
```
---
| **User**
---|---
```html
```
---
| **Sign-In**
---|---
```html
```
---
| **Sign-Out**
---|---
```html
```
---
| **Trash**
---|---
```html
```
---
| **Paperclip**
---|---
```html
```
---
| **File**
---|---
```html
```
---
| **Folder**
---|---
```html
```
---
| **Folder Open**
---|---
```html
```
---
| **Work**
---|---
```html
```
---
| **Portfolio**
---|---
```html
```
---
| **Book**
---|---
```html
```
---
| **Calendar**
---|---
```html
```
---
| **Print**
---|---
```html
```
---
| **Eye**
---|---
```html
```
---
| **Bookmark**
---|---
```html
```
---
| **Tag**
---|---
```html
```
---
| **Lightning**
---|---
```html
```
---
| **Activity**
---|---
```html
```
---
| **Location**
---|---
```html
```
---
| **Export**
---|---
```html
```
---
| **Import**
---|---
```html
```
---
| **Inbox**
---|---
```html
```
---
| **Archive**
---|---
```html
```
---
| **Reply**
---|---
```html
```
---
| **Edit**
---|---
```html
```
---
| **Compose**
---|---
```html
```
---
| **Upload**
---|---
```html
```
---
| **Download**
---|---
```html
```
---
| **Send**
---|---
```html
```
---
| **Link**
---|---
```html
```
---
| **Code**
---|---
```html
```
---
| **Lock**
---|---
```html
```
---
| **Unlock**
---|---
```html
```
---
| **Bell**
---|---
```html
```
---
| **Alert**
---|---
```html
```
---
| **Info**
---|---
```html
```
---
| **Credit Card**
---|---
```html
```
---
| **Cart**
---|---
```html
```
---
| **Bag**
---|---
```html
```
---
| **Gift**
---|---
```html
```
---
| **External**
---|---
```html
```
---
| **Reload**
---|---
```html
```
---
| **Clipboard**
---|---
```html
```
---
| **Filter**
---|---
```html
```
---
| **Feed**
---|---
```html
```
---
| **Moon**
---|---
```html
```
---
| **Microphone**
---|---
```html
```
---
| **Telephone**
---|---
```html
```
---
| **Desktop**
---|---
```html
```
---
| **Mobile**
---|---
```html
```
---
| **Horizontal Ellipsis**
---|---
```html
```
---
| **Vertical Ellipsis**
---|---
```html
```
---
| **Twitter**
---|---
```html
```
---
| **GitHub**
---|---
```html
```
---
## License
MIT
### Attribution
Bytesize Icons does not require attribution, but is encouraged. A link or mention anywhere in your project would be much appreciated.