> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon Block

> Display an icon.

<img src="https://mintcdn.com/prismeai-legacy/jdOgS9ouJy0zTcFo/images/block-icon.png?fit=max&auto=format&n=jdOgS9ouJy0zTcFo&q=85&s=46ad97a5a7af8e398d8dd8fc6ab18281" alt="" width="1098" height="410" data-path="images/block-icon.png" />

[Demo](https://demo.pages.prisme.ai/en/Icon)

The difference between Icon and Image is that Icon's goal is to display simple
svg monochrome graphics accorded to the sibling text content.

## Minimal usage

```yaml theme={null}
# Page/Block
- slug: Icon
  icon: prisme.ai
```

[Demo](https://demo.pages.prisme.ai/en/Icon#minimal-usage)

`icon` is the name of any available icon:

* prisme.ai
* arrow
* arrow-to-center
* arrow-to-outer
* arrow-wall
* attachment
* atom
* back
* bars-three
* brain
* books
* bubble
* bubble-annotation
* calendar
* charts
* chevron
* code-bracket
* images
* list-star
* pencil-magic
* checkbox-checked
* checkbox-unchecked
* checkmark
* circle-checkmark
* code
* copy
* cross
* cube
* download
* expand
* eye
* export
* file
* file-bend
* filter
* firework
* funnel
* folder
* gear
* help
* home
* import
* link
* magnifier
* magnifying-filled
* navigate
* news
* pause
* pencil
* people
* play
* plus
* privacy
* puzzle
* reload
* regen
* robot
* search
* send
* share
* sliders
* star
* store
* test-tube
* three-dots
* thumb
* tool
* tools
* trash
* warning

You can see them on the [demo page](https://demo.pages.prisme.ai/en/Icons).

`icon` can also be an url to an image file but it's usefull only for svg files. Use [Image Block](./Image) for any other uses.

[Demo](https://demo.pages.prisme.ai/en/Icon#all-icons)

## Advanced usage

`rotate` can rotate the icon with a number value in degrees.

```yaml theme={null}
# Page/Block
- slug: Icon
  icon: arrow
  rotate: 180
```

`width` and `height` can force dimensions. Without this, the icon will fit its container. Value can be any valid height/width in css.

```yaml theme={null}
# Page/Block
- slug: Icon
  icon: gear
  width: 2rem
  height: 2rem
```

[Demo](https://demo.pages.prisme.ai/en/Icon#advanced-usage)