---
title: "Icon"
description: "Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information."
sidebar_label: "Icon"
slug: /reference/components/icon
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Icon

Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information.

**Package:** `@terreno/ui`  
**Categories:** Foundation  
**Props interface:** `IconProps`  
**Story source:** [`demo/stories/Icon.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Icon.stories.tsx)

## Live demo

<ComponentDemo name="Icon" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `iconName` | `IconName` | Yes |  |
| `color` | `keyof TextTheme` |  |  |
| `size` | `IconSize` |  |  |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |
| `type` | `union` |  |  |