# 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](http://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.0/extend/icons/) by Bootstrap. ![Bytesize Icons](bytesize-icons.png "Bytesize Icons") ## 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 ![Bytesize Styles](bytesize-styles.png "Bytesize Styles") Style | stroke-linejoin | stroke-linecap -------|-----------------|---------------- Round | round | round Bevel | bevel | butt Miter | miter | butt ### Recommended Weights ![Bytesize Weights](bytesize-weights.png "Bytesize 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.