Skip to content

Kilian/react-bytesize-icons

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

76 Commits
icons
icons
 
 
src
src
 
 
.babelrc
.babelrc
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

Bytesize icons as React components.

All the icons were designed by Dan Klammer.
Find the original SVG icons here.

How to install?

npm install --save react-bytesize-icons

How to use?

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.

Components reference

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/> Activity width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Alert <Alert/> Alert width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Archive <Archive/> Archive width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Bottom <ArrowBottom/> Arrow Bottom width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Left <ArrowLeft/> Arrow Left width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Right <ArrowRight/> Arrow Right width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Top <ArrowTop/> Arrow Top width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Backwards <Backwards/> Backwards width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bag <Bag/> Bag width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ban <Ban/> Ban width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bell <Bell/> Bell width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Book <Book/> Book width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bookmark <Bookmark/> Bookmark width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Calendar <Calendar/> Calendar width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Camera <Camera/> Camera width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Bottom <CaretBottom/> Caret Bottom width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Left <CaretLeft/> Caret Left width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Right <CaretRight/> Caret Right width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Top <CaretTop/> Caret Top width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Cart <Cart/> Cart width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Checkmark <Checkmark/> Checkmark width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Bottom <ChevronBottom/> Chevron Bottom width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Left <ChevronLeft/> Chevron Left width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Right <ChevronRight/> Chevron Right width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Top <ChevronTop/> Chevron Top width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Clipboard <Clipboard/> Clipboard width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Clock <Clock/> Clock width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Close <Close/> Close width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Code <Code/> Code width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Compose <Compose/> Compose width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
CreditCard <CreditCard/> CreditCard width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Desktop <Desktop/> Desktop width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Download <Download/> Download width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Edit <Edit/> Edit width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Eject <Eject/> Eject width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ellipsis Horizontal <EllipsisHorizontal/> Ellipsis Horizontal width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ellipsis Vertical <EllipsisVertical/> Ellipsis Vertical width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
End <End/> End width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Export <Export/> Export width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
External <External/> External width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Eye <Eye/> Eye width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Feed <Feed/> Feed width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
File <File/> File width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Filter <Filter/> Filter width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Fire <Fire/> Fire width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Flag <Flag/> Flag width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Folder <Folder/> Folder width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Folder Open <FolderOpen/> Folder Open width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Forwards <Forwards/> Forwards width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Fullscreen <Fullscreen/> Fullscreen width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
FullscreenExit <FullscreenExit/> FullscreenExit width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Gift <Gift/> Gift width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
GitHub <GitHub/> GitHub width=32, height=32, color='currentcolor', className='example-class' id='example-id'
Heart <Heart/> Heart width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Home <Home/> Home width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Import <Import/> Import width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Inbox <Inbox/> Inbox width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Info <Info/> Info width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Lightning <Lightning/> Lightning width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Link <Link/> Link width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Location <Location/> Location width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Lock <Lock/> Lock width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mail <Mail/> Mail width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Menu <Menu/> Menu width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Message <Message/> Message width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Microphone <Microphone/> Microphone width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Minus <Minus/> Minus width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mobile <Mobile/> Microphone width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Moon <Moon/> Moon width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Move <Move/> Move width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Music <Music/> Music width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mute <Mute/> Mute width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Options <Options/> Options width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Paperclip <Paperclip/> Paperclip width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Pause <Pause/> Pause width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Photo <Photo/> Photo width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Play <Play/> Play width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Plus <Plus/> Plus width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Portfolio <Portfolio/> Portfolio width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Print <Print/> Print width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Reload <Reload/> Reload width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Reply <Reply/> Reply width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Search <Search/> Search width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Send <Send/> Send width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Settings <Settings/> Settings width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
SignIn <SignIn/> SignIn width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
SignOut <SignOut/> SignIn width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Star <Star/> Star width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Start <Start/> Start width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Tag <Tag/> Tag width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Telephone <Telephone/> Telephone width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Trash <Trash/> Trash width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Twitter <Twitter/> Twitter width=32, height=32, color='currentcolor', className='example-class' id='example-id'
Unlock <Unlock/> Unlock width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Upload <Upload/> Upload width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
User <User/> User width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Video <Video/> Video width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Volume <Volume/> Volume width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Work <Work/> Work width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomIn <ZoomIn/> ZoomIn width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomOut <ZoomOut/> ZoomOut width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomReset <ZoomReset/> ZoomReset width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'

If you have any questions, then join our DevChat Slack group!

About

Bytesize Icons as React Components.

Resources

Readme

License

MIT license
Activity

Stars

59 stars

Watchers

3 watching

Forks

9 forks
Report repository

Releases

13 tags

Packages

No packages published

Contributors 7

Languages