Sharing is caring!

???? Font Awesome, Feather, Material Design, and Octicons icon packs as Styled Components

???? styled-icons

Build Status npm npm Built with Styled Components Powered by TypeScript

View Icons

styled-icons provides the Font AwesomeFeatherMaterial Design, and Octicons icon packs as Styled Components, with full support for TypeScript types and tree-shaking / ES modules.

Table of Contents


yarn add styled-icons


npm install styled-icons --save

Additionally, you will need to have installed a version of styled-components, as styled-icons depends on styled-components as a peer dependency.

All Font Awesome (free), Feather, Material, and Octicon icons are available for preview at the Icon Explorer.

The entire icon packs are available via the main import and sub-imports:

import {material, octicons} from 'styled-icons'
import * as faBrands from 'styled-icons/fa-brands'
import * as faRegular from 'styled-icons/fa-regular'
import * as faSolid from 'styled-icons/fa-solid'
import * as feather from 'styled-icons/feather'
import * as material from 'styled-icons/material'
import * as octicons from 'styled-icons/octicons'

The icons are also available as individual imports – it is recommended that you import icons individually using ES modules along with a module bundler like Webpack or Rollup in order to enable tree-shaking. This means that the module bundler will remove unused icons from the final JavaScript bundle, saving bandwidth and speeding up loading:

import React, {Fragment} from 'react'
import {Account, Lock} from 'styled-icons/material'

const App = () => (
    <Account />
    <Lock />

Read the full article on GitHub

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.