---
name: Icon
menu: Components
route: /components/icon
---

import { Playground, Props } from 'docz';
import Icon from './';
import { IconGroup } from '../../../docs-app/';

# Icons

## Import
`import { Icon } from '@blasterjs/core'`

## Basic usage
The `<Icon>` component renders a `<svg>` with basic styles. The icon can be changed via the `name` prop which looks into the theme `icons` object.

<Playground>
  <Icon name="addNode" color="primary" mr="10px" />
  <Icon name="cloud" />
</Playground>

## Custom icons
Alternatively, you can pass the `path` and `viewBox` props to render a custom icon not in the theme.

<Playground>
  <Icon
    color="success"
    size="50px"
    viewBox="0 0 24 24"
    path="M 11 3 L 11 4 L 11 8 L 11 14.541016 A 4 4 0 0 0 9 14 A 4 4 0 0 0 5 18 A 4 4 0 0 0 9 22 A 4 4 0 0 0 13 18 L 13 8 L 19 8 L 19 3 L 11 3 z" />
</Playground>

### PropTypes
Note that you can pass standard [svg attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg#Attributes) and [Aria attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg#Global_attributes)

| Prop | Type | Required | Default | Description | Themeable |
|:-----|:-----|:---------|:--------|:------------|:----------|
| name | string | no | | Takes precedence over `path` and `viewbox` | yes, via `icons` (note the pluralization) |
| path | string | no | | Sets the `d` value of the svg path | |
| size | string | no | `1em` | Sets both `width` and `height` | |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) | |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) | |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) | |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) | |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) | |

## Theming

### Schema
```
icon: {
  overrides: css`
    ...
  `
}
```

### Icon generation utility
Theming icons is hard. But it doesn't have to be. Checkout our [utility tool](https://blaster-icon-theme.netlify.com/). Simply upload some single-path svgs and voilà, custom icons for blaster.

### Overriding icons or adding new icons via the theme
To add or update icons in the theme, utilize the `icons` object and not `icon`. `icon` without an `s` is meant for styling the `<Icon>` component while `icons` is meant for defining values used in the `name` prop of the `<Icon name="">`
```
icons: {
  "specify the name of a new icon and provide appropriate key:values within the object"
  newIconName: {
    title
    viewBox
    path
  },

  "or specify the name of a current icon name and override key:values as needed"
  cloud: {
    title
    viewBox
    path
  }
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/icon)
- [Learn more about themeing](/blaster-theme)


### Index of Icons
<IconGroup />