Need help with bytesize-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

danklammer
3.6K Stars 214 Forks MIT License 146 Commits 5 Opened issues

Description

Tiny style-controlled SVG iconset (101 icons, 12kb)

Services available

!
?

Need anything else?

Contributors list

# 18,240
inline-...
icon-se...
129 commits
# 29,064
JavaScr...
CSS
swagger
openapi
3 commits
# 11,190
github-...
Electro...
phantom...
clang-f...
2 commits
# 4,897
framewo...
appcach...
service...
Sass
1 commit
# 417
Algolia
CSS
Bootstr...
html5
1 commit
# 1,040
Babel
garbage...
type-sy...
Electro...
1 commit
# 224,214
inline-...
icon-se...
1 commit

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.

All 101 icons weigh in at 11.7kb minified (3.2kb in SVGZ).

Used and recommended by Bootstrap.

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.).

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

Style

stroke-linejoin stroke-linecap
Round round round
Bevel bevel butt
Miter miter butt

Recommended Weights

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

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

Forks & Extensions

File Size

16.3 KB

11.7 KB 3.2 KB
Raw Minified SVGZ

Grab-n-Go

| Search ---|---

    
    


| Close ---|---

    


| Plus ---|---

    


| Minus ---|---

    


| Play ---|---

    


| Pause ---|---

    


| Backwards ---|---

    


| Forwards ---|---

     


| Move ---|---

    


| Zoom In ---|---

    
    
    


| Zoom Out ---|---

    
    
    


| Zoom Reset ---|---

    
    
    


| Fullscreen ---|---

    


| Fullscreen Exit ---|---

    


| Star ---|---

    


| Checkmark ---|---

    


| Chevron Top ---|---

    


| Chevron Right ---|---

    


| Chevron Bottom ---|---

    


| Chevron Left ---|---

    


| Arrow Top ---|---

    


| Arrow Right ---|---

    


| Arrow Bottom ---|---

    


| Arrow Left ---|---

    


| Caret Top ---|---

    


| Caret Right ---|---

    


| Caret Bottom ---|---

    


| Caret Left ---|---

    


| Start ---|---

    


| End ---|---

    


| Eject ---|---

    


| Mute ---|---

    


| Volume ---|---

    


| Ban ---|---

    
    


| Flag ---|---

    


| Options ---|---

    


| Settings ---|---

    
    


| Heart ---|---

    


| Clock ---|---

    
    


| Menu ---|---

    


| Message ---|---

    


| Photo ---|---

    
    


| Camera ---|---

    
    


| Video ---|---

    


| Music ---|---

    
    
    


| Mail ---|---

    


| Home ---|---

    


| User ---|---

    


| Sign-In ---|---

    



| Sign-Out ---|---

    


| Trash ---|---

    


| Paperclip ---|---

    


| File ---|---

    


| Folder ---|---

    


| Folder Open ---|---

    


| Work ---|---

    


| Portfolio ---|---

    


| Book ---|---

    


| Calendar ---|---

    


| Print ---|---

    


| Eye ---|---

    
    
    


| Bookmark ---|---

    


| Tag ---|---

    
    


| Lightning ---|---

    


| Activity ---|---

    


| Location ---|---

    
    


| Export ---|---

    


| Import ---|---

    


| Inbox ---|---

    


| Archive ---|---

    


| Reply ---|---

    


| Edit ---|---

    


| Compose ---|---

    


| Upload ---|---

    


| Download ---|---

    


| Send ---|---

    


| Link ---|---

    


| Code ---|---

    


| Lock ---|---

    
    


| Unlock ---|---

    
    


| Bell ---|---

    


| Alert ---|---

    


| Info ---|---

    
    


| Credit Card ---|---

    
    


| Cart ---|---

    
    
    


| Bag ---|---

    


| Gift ---|---

    


| External ---|---

    


| Reload ---|---

    


| Clipboard ---|---

    


| Filter ---|---

    


| Feed ---|---

    
    


| Moon ---|---

    


| Microphone ---|---

    


| Telephone ---|---

    
    


| Desktop ---|---

    


| Mobile ---|---

    


| Horizontal Ellipsis ---|---

    
    
    


| Vertical Ellipsis ---|---

    
    
    


| Twitter ---|---

    


| GitHub ---|---

    


License

MIT

Attribution

Bytesize Icons does not require attribution, but is encouraged. A link or mention anywhere in your project would be much appreciated.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.