Icons from packs like Font Awesome, Material, Octicons, Feather, Icomoon, and Boxicons available as Styled Components
npm install styled-iconsstyled-icons provides over 20,000 icons from the following icon packs as Styled Components, with full support for TypeScript types and tree-shaking / ES modules.
- Bootstrap
- Boxicons
- Crypto Icons
- Entypo
- Eva Icons
- Evil Icons
- Feather
- FluentUI System
- Font Awesome
- Foundation
- Heroicons
- Icomoon
- Ionicons
- Material Design
- Octicons
- Open Iconic
- Remix
- Simple Icons
- Typicons
- Zondicons
---
Do you use Emotion?
Check out 👩🎤 Emotion Icons
Would you prefer plain SVGs?
Check out 🎛️ SVG Icons
---
- Installation
- Usage
- Props
- Icon Dimensions
- Styled Components
- Base Icon Styles
- Accessibility
- Tree Shaking
- TypeScript
- Contributing
- License
- Contributors
You can install all the icon packs simultaneously:
```
yarn add styled-icons
or
``
npm install styled-icons --save
Alternatively you can install only the icon packs you need:
``
yarn add @styled-icons/bootstrap
yarn add @styled-icons/boxicons-logos
yarn add @styled-icons/boxicons-regular
yarn add @styled-icons/boxicons-solid
yarn add @styled-icons/crypto
yarn add @styled-icons/entypo
yarn add @styled-icons/entypo-social
yarn add @styled-icons/evaicons-outline
yarn add @styled-icons/evaicons-solid
yarn add @styled-icons/evil
yarn add @styled-icons/fa-brands
yarn add @styled-icons/fa-regular
yarn add @styled-icons/fa-solid
yarn add @styled-icons/feather
yarn add @styled-icons/fluentui-system-filled
yarn add @styled-icons/fluentui-system-regular
yarn add @styled-icons/foundation
yarn add @styled-icons/heroicons-outline
yarn add @styled-icons/heroicons-solid
yarn add @styled-icons/icomoon
yarn add @styled-icons/ionicons-sharp
yarn add @styled-icons/ionicons-solid
yarn add @styled-icons/ionicons-outline
yarn add @styled-icons/material
yarn add @styled-icons/material-outlined
yarn add @styled-icons/material-rounded
yarn add @styled-icons/material-twotone
yarn add @styled-icons/material-sharp
yarn add @styled-icons/octicons
yarn add @styled-icons/open-iconic
yarn add @styled-icons/remix-fill
yarn add @styled-icons/remix-editor
yarn add @styled-icons/remix-line
yarn add @styled-icons/simple-icons
yarn add @styled-icons/typicons
yarn add @styled-icons/zondicons
Finally, you will need to have installed a version of styled-components at least version 4.1.0 or newer, as styled-icons depends on styled-components as a peer dependency.
All icons are available for preview at the Icon Explorer.
The entire icon packs are available via the main import and sub-imports:
`javascript
import {material, octicons} from 'styled-icons'
import * as bootstrap from '@styled-icons/bootstrap'
import * as boxiconsLogos from '@styled-icons/boxicons-logos'
import * as boxiconsRegular from '@styled-icons/boxicons-regular'
import * as boxiconsSolid from '@styled-icons/boxicons-solid'
import * as crypto from '@styled-icons/crypto'
import * as entypo from '@styled-icons/entypo'
import * as entypoSocial from '@styled-icons/entypo-social'
import * as evaiconsOutline from '@styled-icons/evaicons-outline'
import * as evaiconsSolid from '@styled-icons/evaicons-solid'
import * as evil from '@styled-icons/evil'
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 fluentUISystemFilled from '@styled-icons/fluentui-system-filled'
import * as fluentUISystemRegular from '@styled-icons/fluentui-system-regular'
import * as foundation from '@styled-icons/foundation'
import * as heroiconsOutline from '@styled-icons/heroicons-outline'
import * as heroiconsSolid from '@styled-icons/heroicons-solid'
import * as icomoon from '@styled-icons/icomoon'
import * as ioniconsSharp from '@styled-icons/ionicons-sharp'
import * as ioniconsSolid from '@styled-icons/ionicons-solid'
import * as ioniconsOutline from '@styled-icons/ionicons-outline'
import * as material from '@styled-icons/material'
import * as materialOutlined from '@styled-icons/material-outlined'
import * as materialRounded from '@styled-icons/material-rounded'
import * as materialSharp from '@styled-icons/material-sharp'
import * as materialTwoTone from '@styled-icons/material-twotone'
import * as octicons from '@styled-icons/octicons'
import * as openIconic from '@styled-icons/open-iconic'
import * as remixFill from '@styled-icons/remix-fill'
import * as remixEditor from '@styled-icons/remix-editor'
import * as remixLine from '@styled-icons/remix-line'
import * as simpleIcons from '@styled-icons/simple-icons'
import * as typicons from '@styled-icons/typicons'
import * as zondicons from '@styled-icons/zondicons'
`
You can also import just the icons you need:
`javascript
import React, {Fragment} from 'react'
import {AccountCircle, Lock} from '@styled-icons/material'
const App = () => (
)
`
For the individual icon pack packages (@styled-icons/PACK), the icons are also importable individually - this is not possible with the uber-styled-icons package containing all the packs:
`javascript
import React from 'react'
import {Lock} from '@styled-icons/material/Lock'
const App = () =>
`
Styled Icons accept all the valid props of an element, in addition to the following custom props:
| Prop | Required | Type | Description |
| ------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| size | optional | string, number | This is a convenience for setting both width and height to the same value |title
| | optional | string | This sets the icon title and enables the standalone icon accessibility mode. See accessibility below for additional details |
Example
`javascript
import React from 'react'
import {Lock} from '@styled-icons/material'
const App = () =>
`
Some icons natively have non-square dimensions - original dimensions are exported from the individual icon exports:
`javascript
import {LogoGithub, LogoGithubDimensions} from '@styled-icons/octicons/LogoGithub'
const App = () =>
console.log(LogoGithubDimension) // {height: 16, width: 45}
`
Dimension exports are not available on the icon pack or index exports:
`javascript
import * as octicons from '@styled-icons/octicons'
import {octicons} from 'styled-icons'
// octicons contains only icon exports
`
All icons are exported as Styled Components, which means it is possible to utilize the Styled Components API:
`javascript
import styled from 'styled-components'
import {Lock} from '@styled-icons/material'
export const RedLock = styled(Lock)
color: red;
font-weight: ${(props) => (props.important ? 'bold' : 'normal')};`
If you wish to style all icons at once, you can create a wrapper styled component that imparts a particular style to all icons contained within the wrapper by targeting the StyledIconBase component:
`javascript
import styled from 'styled-components'
import {StyledIconBase} from '@styled-icons/styled-icon'
export const IconStyleWrapper = styled.div
${StyledIconBase} {
color: red;
/ icon styles go here /
}`
Styled Icons have two different built-in "modes" for accessibility purposes. By default, icons are considered decorative, meaning the icon is just visual sugar and the surrounding content is sufficient for conveying meaning. This will set the aria-hidden attribute on the resulting HTML to hide the icon from screen readers.
`javascript
// this icon
// will result in
`
Alternatively the icon could be used in standalone mode, meaning the icon itself should convey meaning. This mode is enabled by setting a title prop - this is the text that will be read by a screen reader. This results in role being set to img and the addition of a
element.`javascript
// this icon
// will result in
`Since Style Icons accept all