@vslutov/react-bytesize-icons
TypeScript icon, indicating that this package has built-in type declarations

0.12.5 • Public • Published

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!

Dependencies (0)

    Dev Dependencies (5)

    Package Sidebar

    Install

    npm i @vslutov/react-bytesize-icons

    Weekly Downloads

    0

    Version

    0.12.5

    License

    MIT

    Unpacked Size

    341 kB

    Total Files

    211

    Last publish

    Collaborators

    • vslutov