Title: Icon
Published: March 9, 2021
Last modified: September 4, 2026

---

# Icon

## In this article

 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#props)
    - [icon](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#icon)
    - [size](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#size)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#wp--skip-link--target)

See the [WordPress Storybook](https://wordpress.github.io/gutenberg/?path=/docs/components-icon--docs)
for more detailed, interactive documentation.

Renders a raw icon without any initial styling or wrappers.

    ```language-jsx
    import { wordpress } from '@wordpress/icons';

    <Icon icon={ wordpress } />
    ```

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#props)󠁿

### 󠀁[icon](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#icon)󠁿

 * Type: `IconType | null`
 * Required: No
 * Default: `null`

The icon to render. In most cases, you should use an icon from
 [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).

Other supported values are: component instances, functions,
 [Dashicons](https://developer.wordpress.org/resource/dashicons/)(
specified as strings), and `null`.

The `size` value, as well as any other additional props, will be passed through.

### 󠀁[size](https://developer.wordpress.org/block-editor/reference-guides/components/icon/?output_format=md#size)󠁿

 * Type: `number`
 * Required: No
 * Default: `'string' === typeof icon ? 20 : 24`

The size (width and height) of the icon.

Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.

First published

March 9, 2021

Last updated

September 4, 2026

Edit article

[ Improve it on GitHub: Icon ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/icon/README.md)

[  Previous: WithSpokenMessages](https://developer.wordpress.org/block-editor/reference-guides/components/with-spoken-messages/)

[  Next: InputControl](https://developer.wordpress.org/block-editor/reference-guides/components/input-control/)