---
describes: SVGIcon
---
SVGIcon renders an accessible SVG icon inline in the HTML document.
In this example `iconExample` is the SVG source loaded as a string.
The SVGIcon component will add title and description elements for you if you set the `title`
and `description` props. See the [InlineSVG](InlineSVG) component for more props and
examples.
_A11y note:_ By default the role is set to `presentation`. However, when the `title` prop is set, the `role`
attribute is set to `img`. Include the `description` prop to further describe the image.
### Default icon size
By default SVGIcon is set to a size of `1em`, so it will scale to match the `font-size` of
its parent element.
```js
---
type: example
---
```
### Changing icon size
To change the size of the icon, use one of the predefined options for the `size` prop.
```js
---
type: example
---
```
If you need a size that is not offered via the `size` prop, use the `width` or `height` props, these accept a valid CSS length value.
```js
---
type: example
---
```
### Changing icon color
By default SVGIcon inherits the color of its parent element. However,
[InlineSVG](InlineSVG), the child component of SVGIcon, supports setting
the icon to one of the theme colors via the `color` property.
> Setting `color` to `auto` will make SVGIcon not set
> any color fill. If you are setting the icon color via the `className` prop,
> use this option — otherwise the `color` value set by your class
> could be overwritten.
```js
---
type: example
---
```
```js
---
type: example
---
```
### Changing icon rotation
SVGIcon can be rotated by adding a `rotate` prop of 0 (default), 90, 180, or 270.
```js
---
type: example
---
```
### Changing the icon's display property
SVGIcon defaults to displaying `inline-block`, which can result in some space
appearing beneath the icon, as it will inherit its parent's `line-height`.
In situations where this is undesirable, you can set `inline` to `false` to make
the icon display as a block-level element.
```js
---
type: example
---
```
### Children
The SVGIcon component also accepts SVG content as jsx via the children prop. Note: if passing the path via the children prop, do not forget to include the **viewBox** attribute (see example).
```js
---
type: example
---
```