💅 styled-icons

styled-icons provides the Material Design and Octicons icon packs as Styled Components, with full TypeScript and ES6 / tree-shaking support.

Installation

yarn add styled-icons

or

npm install styled-icons --save

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

Usage

All 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 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 = () => (
  <Fragment>
    <Account />
    <Lock />
  </Fragment>
)

Styled Components

All icons are exported as Styled Components, which means it is possible to extend their styles or otherwise utilize the Styled Components API:

import {Lock} from 'styled-icons/material'

export const RedLock = Lock.extend`
  color: red;

  font-weight: ${props => (props.important ? 'bold' : 'normal')};
`

TypeScript

The icons of styled-icons are built using TypeScript and export type definitions. By default, the theme prop is typed as any, but if you would like to override the theme interface, this is possible via the StyledIcon type:

import {StyledIcon} from 'styled-icons/material'
import {Lock} from 'styled-icons/material'

interface ThemeInterface {
  lockColor: string
}

export const ThemedLock: StyledIcon<ThemeInterface> = Lock.extend`
  color: ${props => props.theme.lockColor};
`

If you have any ideas for improvements to the TypeScript typing, please open an issue or PR!

Contributing

Contributions are welcome! Feel free to open an issue or a pull request and participate at whatever level you would like.

License

The MIT License - see LICENSE.

The Material Design icons are licensed under the Apache License Version 2.0.

The Octicons are licensed under the MIT License.