📦 This package provides the Simple Icons packaged as a set of React components.

Overview
react simple icons

react-simple-icons

This package provides a React component for simple-icons.

www.npmjs.com! builds! downloads licence

Installation

Install the package in your project directory with:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

TypeScript Support

Usage

You can use simpleicons.org to find a specific icon. Then, you can import the icon from simple-icons and use it with the Icon component:

import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <Icon icon={siReact} color="#61DAFB" size={24} />;
}

Demo

Edit codesandbox

Change title

@icons-pack/react-simple-icons provides a default title referring to the component name

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

// title default "React"
function ChangeTitle() {
  return <Icon icon={siReact} title="My title" color="#61DAFB" size={24} />;
}

Custom styles

import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

// title default "React"
function CustomStyles() {
  return <Icon icon={siReact} className="myStyle" />;
}
.myStyle {
  width: 35px;
  height: 35px;
}
Comments
  • Generic icon component with type property.

    Generic icon component with type property.

    I would like to have a dynamic icon component that I can use for my card component, this way I can just pass an argument of type Icon to my card component and then use that parameter to load that icon.

    For example: <Icon type={platformIcon} size={25} />

    platformIcon would be a variable that holds an icon, like ReactJs, which then would become <Icon type="ReactJS" size="25" />

    I currently see no way to have an icon component be dynamic, could this be added?

    Edit: I know I could do this myself, but that would require me to import ALL the icons first

    feature 
    opened by BlackBearFTW 10
  • Can tree shaking be improved for named imports?

    Can tree shaking be improved for named imports?

    If I import

    import { Github } from "@icons-pack/react-simple-icons";
    

    webpack packs whole library (2MB+).

    If i import only one file

    import  Github  from "@icons-pack/react-simple-icons/lib/Github";
    

    only icon I need (few kB).

    I would expect for named imports to get tree shaken and pack only files that are needed.

    Thanks for the lib, btw ;)

    enhancement help wanted good first issue 
    opened by pomali 8
  • Provide TypeScript types

    Provide TypeScript types

    Can you also provide TypeScript types? I want to use Simple Icons in a TS + React app but it doesn't compile (with strict settings) because of the missing types.

    I think it makes most sense to automatically generate the icons and their types in one go.

    enhancement 
    opened by alinnert 8
  • automatically stay up to date with simple-icons

    automatically stay up to date with simple-icons

    Automatically staying up to date would allow users to use new icons as soon as they come out. I believe this is easily possible with renovate, which can automerge. You could also use a GitHub Actions cron job to update simple-icons, push a commit, and build and publish the package (this is what I do for the python wrapper).

    opened by sachinraja 6
  • v5.2.0 tree shaking doesn't work as intended

    v5.2.0 tree shaking doesn't work as intended

    I've been using this library for a long time and I'm very thankful for your work!

    I've recently updated to v5.2.0 and tree shaking is now broken. I saw this issue #32 but I guess something must've changed since v3.

    This is how I'm importing the icons:

    import { Facebook, Instagram, Twitter } from "@icons-pack/react-simple-icons";
    

    It's a Next.js application with Typescript. Below you can see a before and after in bundle size:

    No icons:

    Page                                       Size     First Load JS
    ┌ ● /                                      811 B           129 kB
    ...
    

    With icons:

    Page                                       Size     First Load JS
    ┌ ● /                                      811 B          1.68 MB
    ...
    
    opened by TommasoAmici 3
  • Version 5.1 Husky error

    Version 5.1 Husky error

    Hey,

    As in the title, I noticed this latest commit / version produces a husky error.

    npm ERR! code 1 npm ERR! path C:\Users\path\to\repot\[email protected]\react-simple-icons npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c husky install npm ERR! 'husky' is not recognized as an internal or external command, npm ERR! operable program or batch file.

    this is not present in 5.0.0 I have my .git in a parent folder which I believe is impacting this issue,

    bug 
    opened by nharpa 3
  • Components and README not UpperCamelCase

    Components and README not UpperCamelCase

    opened by Hahlh 3
  • feat(simple-icons): bump simple-icons@7.13.0

    feat(simple-icons): bump [email protected]

    In this version, there is an important change to our package. See https://github.com/simple-icons/simple-icons/pull/7852.

    Next time we generate components will get a clean diff set :)

    I also fixed the final newline and indent for components.

    opened by LitoMore 2
  • Typescript: Unable to add className prop

    Typescript: Unable to add className prop

    Hello!

    Since the upgrade to version 5, I am unable to specify a className prop on the icons. Although it still technically works, it does cause a typescript error.

    Example:

    import { Github } from "@icons-pack/react-simple-icons";
    
    <Github className="mr-2 w-5 h-5" /> Sign in with Github
    

    There are a few ways that this could be handled. Either you could extend the SVG props as defined by React, or create a shared interface that all of the icons extend (if you want more control over what props users should pass through).

    I'm happy to assist in any way, just let me know what course of action you prefer to take.

    opened by justinwaite 2
  • breaking: export only one component that accepts an icon object

    breaking: export only one component that accepts an icon object

    closes #110, closes #116

    see discussion in #110

    I updated the README, but @wootsbot will have to update his codesandbox demo. I did not update the changelog.

    opened by sachinraja 2
  • Dynamic import by icon slug

    Dynamic import by icon slug

    Hi, is it possible to import needed icons dynamically using icon slug?

    I have this component:

    interface Props {
      title: string;
      icon: string;
    }
    
    export const BadgeWithIcon = (props: Props): JSX.Element => {
      return (
        <span className='badge bg-primary'>
          {/* ICON */}
          {props.title}
        </span>
      );
    }
    

    and I want to insert icon dynamically like that:

    <BadgeWithIcon title="ReactJS" icon="reactjs" />
    
    opened by pawelmalak 2
Releases(v5.8.0)
  • v5.8.0(Oct 2, 2022)

  • v5.7.0(Sep 26, 2022)

  • v5.6.0(Sep 15, 2022)

  • v5.5.0(Sep 5, 2022)

  • v5.4.0(Aug 17, 2022)

  • v5.3.0(Aug 12, 2022)

    Minor Changes

    What's Changed

    • fix: rollup config prevented tree shaking by @TommasoAmici in https://github.com/icons-pack/react-simple-icons/pull/141
    • ci(Release): version icons-pack/react-simple-icons by @github-actions in https://github.com/icons-pack/react-simple-icons/pull/142

    New Contributors

    • @TommasoAmici made their first contribution in https://github.com/icons-pack/react-simple-icons/pull/141

    Full Changelog: https://github.com/icons-pack/react-simple-icons/compare/v5.2.0...v5.3.0

    Source code(tar.gz)
    Source code(zip)
  • v5.2.0(Jul 14, 2022)

  • v5.1.2(Jun 23, 2022)

    Patch Changes

    • dca9bb1 Thanks @wootsbot! - extend component types to use ComponentPropsWithoutRef<'svg'>

    What's Changed

    • fix(types): extend component types to use ComponentPropsWithoutRef<'svg'> by @justinwaite in https://github.com/icons-pack/react-simple-icons/pull/137
    • ci(Release): version icons-pack/react-simple-icons by @github-actions in https://github.com/icons-pack/react-simple-icons/pull/138

    New Contributors

    • @justinwaite made their first contribution in https://github.com/icons-pack/react-simple-icons/pull/137

    Full Changelog: https://github.com/icons-pack/react-simple-icons/compare/v5.1.1...v5.1.2

    Source code(tar.gz)
    Source code(zip)
  • v5.1.1(Jun 16, 2022)

  • v5.1.0(Jun 16, 2022)

  • v5.0.0(Jun 11, 2022)

  • v4.7.2(Jun 9, 2022)

  • v4.7.1(Jul 13, 2021)

    What's Changed

    • Update simple icons by @wootsbot in https://github.com/icons-pack/react-simple-icons/pull/103
    • Update TypeScript props to include title by @mattferderer

    Full Changelog: https://github.com/icons-pack/react-simple-icons/compare/v4.4.0...v4.6.1

    Source code(tar.gz)
    Source code(zip)
  • v4.4.0(May 27, 2021)

  • v4.3.0(May 15, 2021)

  • v4.2.0(Apr 11, 2021)

  • v4.1.0(Feb 19, 2021)

    v4.1.0 - Feb 19, 2021

    release simple icons 4.11.0

    New Icons

    AOL Blockchain.com China Eastern Airlines Cloudera D-Wave Systems Major League Hacking Oxygen Pug Textpattern Windows Terminal dwm LiveChat PubMed Showtime suckless Aeroméxico Air China Alibaba Cloud Amazon Pay BBC Chainlink Chakra UI China Southern Airlines CountingWorks PRO Delta Emirates Falcon Jamstack macOS NASA Nrwl Okta OYO Premier League Redux-Saga Screencastify SFML Statuspal stylelint Tampermonkey TV Time Vector Logo Zone Vectorworks Zoiper Acclaim Alitalia Amazon DynamoDB Bookmeter Cachet Corsair Crystal Eagle Foxtel IBM Watson Kongregate Lydia Namecheap OPNSense Solidity Songoda

    Updated Icons

    Android Auto Google Street View Google Tag Manager LinkedIn New Japan Pro-Wrestling openSUSE Roundcube Svelte .NET Google Chrome Google Sheets Anchor Google AdSense Google News Google Scholar Google Translate Opel AliExpress Alipay Bing Corona Engine Corona Renderer Delicious Firebase Firefox GitHub GitHub Actions Gmail Google Assistant Google Calendar Klook LG LGTM Taobao Toyota Umbraco

    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Feb 19, 2021)

  • v3.13.0(Nov 13, 2020)

    v3.13.0 - Nov 13, 2020

    release simple icons 3.12.0

    New Icons

    • El Jueves
    • SMRT

    Updated Icons

    • Awesome Lists
    • CoffeeScript
    • Debian
    • Deno
    • Django
    • Flask
    • Huawei
    • LG
    • Netflix
    • Nokia
    • Python
    • Redux
    • Storybook
    • Strapi
    • Vimeo
    • XDA Developers
    • YouTube
    • Zoom
    • GitKraken
    • MongoDB
    • MySQL
    • PlayStation
    • PostgreSQL
    • Travis CI
    • Ruby on Rails
    • Android
    • Codecov
    • Fedora
    • JSON
    • Linux
    • Markdown
    • Next.js
    • Nuxt.js
    • rollup.js
    • Webpack
    Source code(tar.gz)
    Source code(zip)
  • v3.12.0(Oct 5, 2020)

    v3.12.0 - Oct 5, 2020

    release simple icons 3.11.0

    New Icons

    • Arlo (#3202)
    • Azure Data Explorer (#3189)
    • Bata (#3077)
    • bunq (#3194)
    • Cloud 66 (#3371)
    • Clubhouse (#3530)
    • CurseForge (#3533)
    • Daimler (#3151)
    • FastAPI (#3522)
    • G2A (#3042)
    • HCL (#3060)
    • Instructables (#3009)
    • Julia (#3498)
    • Kahoot (#3611)
    • Kakao (#3192)
    • Minecraft (#3026)
    • PicPay (#3206)
    • RenovateBot (#3486)
    • Revolut (#3242)
    • Ring (#3196)
    • San Francisco Municipal Railway (#3118)
    • Sketchfab (#3459)
    • The Sounds Resource (#3603)
    • Thumbtack (#3233)
    • Tor Browser (#3452)
    • Unilever (#3499)
    • vFairs (#3365)
    • VirtualBox (#3608)
    • Wagtail (#3208)
    • WakaTime (#2975)

    Updated Icons

    • Amazon (#3619)
    • Archicad (#3327)
    • Firebase (#3620)
    • Firefox Browser (#3622)
    • Flutter (#3627)
    • GitLab (#3621)
    • HubSpot (#3625)
    Source code(tar.gz)
    Source code(zip)
  • v3.11.0(Oct 3, 2020)

    v3.11.0 - Oct 3, 2020

    release simple icons 3.10.0

    Rename components React

    - const Cinema4d = forwardRef(function Cinema4d(
    + const CinemaFourD = forwardRef(function CinemaFourD(
    
    - const Dynamics365 = forwardRef(function Dynamics365(
    + const DynamicsThreeHundredSixtyFive = forwardRef(function DynamicsThreeHundredSixtyFive(
    
    - const N26 = forwardRef(function N26(
    + const NTwentySix = forwardRef(function NTwentySix(
    
    - const Neo4j = forwardRef(function Neo4j(
    + const NeoFourJ = forwardRef(function NeoFourJ(
    
    - const Playstation4 = forwardRef(function Playstation4(
    + const PlaystationFour = forwardRef(function PlaystationFour(
    
    - const Playstation2 = forwardRef(function Playstation2(
    + const PlaystationTwo = forwardRef(function PlaystationTwo(
    
    - const Society6 = forwardRef(function Society6(
    + const SocietySix = forwardRef(function SocietySix(
    
    

    New Icons

    • 4D
    • Ableton Live
    • Amazon Prime
    • Ant Design
    • Aseprite
    • GIPHY
    • Gridsome
    • HomeAdvisor
    • Iconfinder
    • Karlsruher Verkehrsverbund
    • Leanpub
    • Lospec
    • Maytag
    • Notepad++
    • REWE
    • SketchUp
    • Starling Bank
    • The Models Resource
    • The Spriters Resource
    • TurboSquid
    • 42
    • Buefy
    • Erlang
    • NumPy
    • scikit-learn
    • Shutterstock
    • Ren'Py
    • Osano
    • ReactiveX
    • Hack Club
    • Ubiquiti

    Updated Icons

    • SAP
    • Just Eat
    Source code(tar.gz)
    Source code(zip)
  • v3.10.0(Aug 22, 2020)

  • v3.9.0(Aug 8, 2020)

  • v3.8.0(Jul 28, 2020)

  • v3.7.0(Jul 22, 2020)

    v3.7.0 - Jul 21, 2020

    release simple icons 3.2.0

    New Icons

    • [x] Drooble
    • [x] IFTTT
    • [x] JPEG
    • [x] Planet
    • [x] Pelican

    Updated Icons

    • [x] Ardour
    • [x] Basecamp
    • [x] Celery
    • [x] CentOS
    • [x] Cloudsmith
    • [x] deepin
    • [x] JetBrains
    • [x] KTM
    • [x] Nucleo
    • [x] uBlock Origin
    • [x] 500px
    • [x] Quantcast
    • [x] Speaker Deck

    🔨 Updated underlying Tools

    • [x] bump lodash from 4.17.15 to 4.17.19
    Source code(tar.gz)
    Source code(zip)
  • v3.6.0(Jul 7, 2020)

    v3.6.0 - Jul 07, 2020

    release simple icons 3.0.1

    New Icons

    • [x] Altium Designer
    • [x] Facebook Gaming
    • [x] Firefox Browser
    • [x] HEY
    • [x] JFrog
    • [x] JFrog Bintray
    • [x] Jira Software
    • [x] Payoneer
    • [x] Pimcore

    Updated Icons

    • [x] Jira
    • [x] Moleculer
    • [x] Odnoklassniki
    • [x] Simple Icons

    Renamed Icons

    • [x] Adobe Premiere to Adobe Premiere Pro
    • [x] Cassandra to Apache Cassandra
    • [x] Line to LINE
    • [x] Mojang to Mojang Studios
    • [x] Mozilla Firefox to Firefox
    • [x] Mozilla Thunderbird to Thunderbird
    • [x] Rails to Ruby on Rails
    • [x] Tik Tok to TikTok
    • [x] Zeit to Vercel

    Removed Icons

    • [x] Adobe Typekit
    • [x] Greenkeeper
    Source code(tar.gz)
    Source code(zip)
  • v3.5.0(Jul 3, 2020)

  • v3.4.0(Jun 17, 2020)

  • v3.3.0(Jun 10, 2020)

  • v3.2.0(Jun 3, 2020)

Owner
Icons Pack
📦 Icons pack, in components of React, Vue, Svelte and plugins to Figma and Sketch, created with popular icons and brands.
Icons Pack
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.

React-CRUD-Icons · React-CRUD-Icons is a set of SVG icons for CRUD (Create, Read, Update, Delete) apps, implemented as a React component with light &

Olivier Giulieri 19 Aug 12, 2022
An svg icon from clipboard.js site assets, packaged as a React stateless component

react-clipboard-icon is an svg icon from clipboard.js site assets, packaged as a React stateless component Installation | Usage | Development | Licens

Gianluca Casati 2 Mar 26, 2019
Supercons - A friendly set of open source React icons

Supercons A friendly set of open source React icons. → Preview & search the iconset Massive credit to @superbryntendo for the original set of icons &

Uvacoder 0 May 26, 2022
Easily include popular icons in your React projects and provide an easy tool to convert svg into React components

Search SVG Icons. Easily include popular icons in your React projects and provide an easy tool to convert SVG into React components. @icongo

小弟调调™ 14 Sep 24, 2022
A React SVG components library of Framework7 Icons with better usability.

A React SVG components library of Framework7 Icons > npm install react-f7-icons import F7Icon from 'react-f7-icons' export default function Component

Jang Haemin 5 Sep 9, 2021
Akar icons library as React components.

akar-icons A perfectly rounded icon library made for designers, developers, and pretty much everyone. Explore all of our icons at akaricons.com. Get S

Art 379 Sep 26, 2022
Bytesize Icons as React Components.

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 r

Kilian Valkhof 60 Apr 9, 2022
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Sep 16, 2022
A small and simple component to create icons from a rating

Pretty rating React A small and simple library that transform you rating in icons for you web Status Getting started To install as npm dependency npm

Eduardo Esteban Alvarez Castañeda 2 Nov 13, 2021
React-useanimations is a collection of free animated open source icons for React.js.

React UseAnimations Icons What is react-useanimations? React-useanimations is a collection of free animated open source icons for React.js. Collection

useAnimations 783 Sep 26, 2022
svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

null 8.5k Sep 26, 2022
🌈 React component for Iconly icons

?? React Iconly Icons React component for Iconly icons react-iconly is a collection of simply beautiful open source icons for React.js. Each icon is d

Junior Garcia 167 Sep 25, 2022
🎨 Tabler Icons for React

tabler-icons-react A library of React components for Tabler Icons — a set of over free 700 open-sourced MIT-licensed icons. Usage The package is avail

Konrad Kalemba 152 Sep 21, 2022
svg social icons in react

react-social-icons A set of beautiful svg social icons. Easily used in React. No images or external css dependencies. Svg paths provided by Squarespac

Jake Trent 300 Sep 30, 2022
PureScript bindings for react-icons

purescript-react-icons PureScript bindings for react-icons. Include popular icons in your React projects easily with react-icons, which utilizes ES6 i

Andy 4 Jul 11, 2022
🧡 A beautifully icons library for React.

⚡ React-Symbols is a library for React with the icons of the VSCode theme "Symbols" by Miguel Solorio (@misolori). ?? Features ?? +40 icons. ?? Lightw

Pablo Hdez 30 Sep 26, 2022
Free “do wtf you want with” pixel-perfect icons.

Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries. Browse a

Make Lemonade 282 Sep 21, 2022
SVG icons for Ocean DS

Ocean Icons This project is composed of many npm packages for building icons to the Ocean design-system. Installation yarn add @useblu/ocean-icons-rea

Ocean Design System 4 Jul 1, 2022
Memoized fetch SVG icons from many popular icon sets with editor autocomplete and a Web Component ready to use

icon-svg Memoized fetch SVG icons from many popular icon sets with editor autocomplete and a Web Component ready to use npm i icon-svg pnpm add icon-s

stagas 1 Apr 13, 2022