---
### Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Icon Dimensions](#icon-dimensions)
- [Styled Components](#styled-components)
- [Base Icon Styles](#base-icon-styles)
- [Accessibility](#accessibility)
- [Tree Shaking](#tree-shaking)
- [TypeScript](#typescript)
- [Contributing](#contributing)
- [License](#license)
- [Contributors](#contributors)
## Installation
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.
## Usage
All icons are available for preview at the [Icon Explorer](https://styled-icons.dev).
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 = () =>
```
### Props
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](#accessibility) below for additional details |
**Example**
```javascript
import React from 'react'
import {Lock} from '@styled-icons/material'
const App = () =>
```
### Icon Dimensions
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
```
### Styled Components
All icons are exported as [Styled Components](https://www.styled-components.com/), 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')};
`
```
### Base Icon Styles
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 */
}
`
```
### Accessibility
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 `