All the icons were designed by Dan Klammer.
Find the original SVG icons here.
npm install --save react-bytesize-icons
Here's an example for using the <Twitter/> component.
import React from 'react';
import ReactDOM from 'react-dom';
import { Twitter } from 'react-bytesize-icons';
ReactDOM.render(
<Twitter width={50} height={50} color="#1da1f2" />,
document.getElementById('root')
);You can also import this as following.
import Twitter from 'react-bytesize-icons/Twitter';
You should follow the import method which suits your needs. For details check #9.
Check out this guide on how to use the different styles/props listed in the table.
| Component Name | Component Markup | Preview | Optional Props |
|---|---|---|---|
| Activity | <Activity/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Alert | <Alert/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Archive | <Archive/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Arrow Bottom | <ArrowBottom/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Arrow Left | <ArrowLeft/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Arrow Right | <ArrowRight/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Arrow Top | <ArrowTop/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Backwards | <Backwards/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Bag | <Bag/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Ban | <Ban/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Bell | <Bell/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Book | <Book/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Bookmark | <Bookmark/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Calendar | <Calendar/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Camera | <Camera/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Caret Bottom | <CaretBottom/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Caret Left | <CaretLeft/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Caret Right | <CaretRight/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Caret Top | <CaretTop/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Cart | <Cart/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Checkmark | <Checkmark/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Chevron Bottom | <ChevronBottom/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Chevron Left | <ChevronLeft/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Chevron Right | <ChevronRight/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Chevron Top | <ChevronTop/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Clipboard | <Clipboard/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Clock | <Clock/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Close | <Close/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Code | <Code/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Compose | <Compose/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| CreditCard | <CreditCard/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Desktop | <Desktop/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Download | <Download/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Edit | <Edit/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Eject | <Eject/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Ellipsis Horizontal | <EllipsisHorizontal/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Ellipsis Vertical | <EllipsisVertical/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| End | <End/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Export | <Export/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| External | <External/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Eye | <Eye/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Feed | <Feed/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| File | <File/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Filter | <Filter/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Fire | <Fire/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Flag | <Flag/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Folder | <Folder/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Folder Open | <FolderOpen/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Forwards | <Forwards/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Fullscreen | <Fullscreen/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| FullscreenExit | <FullscreenExit/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Gift | <Gift/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| GitHub | <GitHub/> |
 |
width=32, height=32, color='currentcolor', className='example-class' id='example-id' |
| Heart | <Heart/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Home | <Home/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Import | <Import/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Inbox | <Inbox/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Info | <Info/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Lightning | <Lightning/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Link | <Link/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Location | <Location/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Lock | <Lock/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
<Mail/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
|
| Menu | <Menu/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Message | <Message/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Microphone | <Microphone/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Minus | <Minus/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Mobile | <Mobile/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Moon | <Moon/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Move | <Move/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Music | <Music/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Mute | <Mute/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Options | <Options/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Paperclip | <Paperclip/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Pause | <Pause/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Photo | <Photo/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Play | <Play/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Plus | <Plus/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Portfolio | <Portfolio/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
<Print/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
|
| Reload | <Reload/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Reply | <Reply/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Search | <Search/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Send | <Send/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Settings | <Settings/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| SignIn | <SignIn/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| SignOut | <SignOut/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Star | <Star/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Start | <Start/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Tag | <Tag/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Telephone | <Telephone/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Trash | <Trash/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
<Twitter/> |
 |
width=32, height=32, color='currentcolor', className='example-class' id='example-id' |
|
| Unlock | <Unlock/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Upload | <Upload/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| User | <User/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Video | <Video/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Volume | <Volume/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| Work | <Work/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| ZoomIn | <ZoomIn/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| ZoomOut | <ZoomOut/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |
| ZoomReset | <ZoomReset/> |
 |
width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id' |