https://github.com/kilian/react-bytesize-icons

Bytesize Icons as React Components.
https://github.com/kilian/react-bytesize-icons

Last synced: 4 months ago
JSON representation

Bytesize Icons as React Components.

• Host: GitHub
• URL: https://github.com/kilian/react-bytesize-icons
• Owner: Kilian
• License: mit
• Created: 2016-08-19T00:01:15.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T07:54:53.000Z (over 2 years ago)
• Last Synced: 2025-03-19T07:33:34.738Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 255 KB
• Stars: 59
• Watchers: 2
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Bytesize icons as React components.  

All the icons were designed by [Dan Klammer](https://github.com/danklammer).  

Find the original [SVG icons here](https://github.com/danklammer/bytesize-icons).  

### How to install?

`npm install --save react-bytesize-icons`

### How to use?

Here's an example for using the `` component.  

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { Twitter } from 'react-bytesize-icons';

ReactDOM.render(

  ,

  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](https://github.com/abdelhai/react-bytesize-icons/pull/9).

### Components reference

Check out [this guide](https://github.com/danklammer/bytesize-icons#recommended-styles) on how to use the different styles/props listed in the table.  

Component Name  | Component Markup  | Preview | Optional Props

--- | --- | --- | ---

Activity  | `` | ![Activity](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/activity.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Alert | ``  | ![Alert](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/alert.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Archive | ``  | ![Archive](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/archive.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Arrow Bottom  | ``  | ![Arrow Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Arrow Left  | ``  | ![Arrow Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Arrow Right | `` | ![Arrow Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Arrow Top | `` | ![Arrow Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Backwards | ``  | ![Backwards](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/backwards.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Bag | ``  | ![Bag](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/bag.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Ban | ``  | ![Ban](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ban.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Bell  | `` | ![Bell](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/bell.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Book | ``  | ![Book](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/book.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Bookmark  | `` | ![Bookmark](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/bookmark.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Calendar | ``  | ![Calendar](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/calendar.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Camera  | `` | ![Camera](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/camera.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Caret Bottom  | ``  | ![Caret Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Caret Left  | ``  | ![Caret Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Caret Right | `` | ![Caret Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Caret Top | `` | ![Caret Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Cart  | `` | ![Cart](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/cart.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Checkmark | ``  | ![Checkmark](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/checkmark.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Chevron Bottom  | ``  | ![Chevron Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Chevron Left  | ``  | ![Chevron Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Chevron Right | `` | ![Chevron Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Chevron Top | `` | ![Chevron Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Clipboard | ``  | ![Clipboard](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/clipboard.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Clock | ``  | ![Clock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/clock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Close | ``  | ![Close](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/close.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Code  | `` | ![Code](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/code.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Compose | ``  | ![Compose](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/compose.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

CreditCard  | `` | ![CreditCard](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/creditcard.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Desktop | ``  | ![Desktop](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/desktop.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Download  | `` | ![Download](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/download.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Edit  | `` | ![Edit](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/edit.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Eject | ``  | ![Eject](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/eject.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Ellipsis Horizontal | `` | ![Ellipsis Horizontal](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ellipsis-horizontal.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Ellipsis Vertical | `` | ![Ellipsis Vertical](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ellipsis-vertical.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

End | ``  | ![End](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/end.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Export  | `` | ![Export](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/export.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

External  | `` | ![External](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/external.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Eye | ``  | ![Eye](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/eye.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Feed | ``  | ![Feed](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/feed.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

File  | `` | ![File](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/file.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Filter  | `` | ![Filter](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/filter.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Fire  | `` | ![Fire](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/fire.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Flag  | `` | ![Flag](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/flag.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Folder  | `` | ![Folder](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/folder.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Folder Open | `` | ![Folder Open](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/folder-open.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Forwards  | `` | ![Forwards](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/forwards.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Fullscreen  | `` | ![Fullscreen](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/fullscreen.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

FullscreenExit  | `` | ![FullscreenExit](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/fullscreen-exit.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Gift  | `` | ![Gift](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/gift.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

GitHub  | `` | ![GitHub](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/github.svg)   | `width=32, height=32, color='currentcolor', className='example-class' id='example-id'`

Heart | ``  | ![Heart](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/heart.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Home  | `` | ![Home](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/home.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Import  | `` | ![Import](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/import.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Inbox | ``  | ![Inbox](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/inbox.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Info  | `` | ![Info](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/info.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Lightning | ``  | ![Lightning](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/lightning.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Link  | `` | ![Link](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/link.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Location  | `` | ![Location](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/location.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Lock  | `` | ![Lock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/lock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Mail  | `` | ![Mail](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/mail.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Menu  | `` | ![Menu](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/menu.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Message | ``  | ![Message](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/message.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Microphone | ``  | ![Microphone](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/microphone.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Minus  | `` | ![Minus](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/minus.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Mobile | ``  | ![Microphone](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/mobile.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Moon | ``  | ![Moon](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/moon.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Move | ``  | ![Move](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/move.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Music | ``  | ![Music](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/music.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Mute  | `` | ![Mute](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/mute.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Options | ``  | ![Options](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/options.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Paperclip | ``  | ![Paperclip](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/paperclip.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Pause | ``  | ![Pause](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/pause.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Photo | ``  | ![Photo](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/photo.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Play  | `` | ![Play](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/play.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Plus  | `` | ![Plus](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/plus.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Portfolio | ``  | ![Portfolio](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/portfolio.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Print | ``  | ![Print](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/print.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Reload  | `` | ![Reload](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/reload.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Reply | ``  | ![Reply](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/reply.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Search  | `` | ![Search](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/search.svg)  | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Send  | `` | ![Send](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/send.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Settings  | `` | ![Settings](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/settings.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

SignIn  | `` | ![SignIn](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/sign-in.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

SignOut  | `` | ![SignIn](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/sign-out.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Star  | `` | ![Star](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/star.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Start | ``  | ![Start](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/start.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Tag | ``  | ![Tag](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/tag.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Telephone | ``  | ![Telephone](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/telephone.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Trash | ``  | ![Trash](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/trash.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Twitter | ``  | ![Twitter](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/twitter.svg)   | `width=32, height=32, color='currentcolor', className='example-class' id='example-id'`

Unlock  | `` | ![Unlock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/unlock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Upload  | `` | ![Upload](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/upload.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

User  | `` | ![User](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/user.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Video | ``  | ![Video](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/video.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Volume  | `` | ![Volume](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/volume.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

Work  | `` | ![Work](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/work.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

ZoomIn  | `` | ![ZoomIn](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/zoom-in.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

ZoomOut  | `` | ![ZoomOut](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/zoom-out.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'`

ZoomReset  | `` | ![ZoomReset](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/zoom-reset.svg)   | `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!](https://devchat.devolio.net/)