Render an icon from our [icon library](#/Tokens/Icons).
<br /><br />

### Examples

#### Size
Icons are rendered at 24x24 by default, but in some instances you may need a smaller or larger option.

**Small**
```
<Icon size="sm" name="magic-wand" />
```

**Medium (Default)**
```
<Icon size="md" name="magic-wand" />
```

**Large**
```
<Icon size="lg" name="magic-wand" />
```

#### Color
Color is inherited from the closest parent's text-color. If you want to change it specific to the icon, you can apply a `text-` tailwind class.

```
<Icon name="magic-wand" className="text-blue-500" />
```

### When an unknown icon is requested
If an icon is requested that does not exist in the library, a warning will be logged to the console and a default icon will be rendered in its place.

```
<Icon name="unknown-icon" />
```

### Resources
- [Icon library](#/Tokens/Icons)
- [Figma](https://www.figma.com/file/BmneXmVRCUSIZjbYPkSP0W/1.-CK-Shared-Design-System?node-id=356%3A98)
