# Icon

![](https://1974771079-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-MGmdhd73qWg_lPPzHFf%2F-MGxFb4FK_XSTXJGuliv%2FSimulator%20Screen%20Shot%20-%20iPhone%2011%20-%202020-09-01%20at%2017.12.03.png?alt=media\&token=ab13af91-588e-406e-bc64-2d5dcd755bcb)

Icon component provides a simple way to render images by requesting it from an icon set.

```jsx
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { colors } from '../../styles';

<Icon name={'home'} size={24} color={colors.primary} />
<Icon name={'calendar'} size={24} color={colors.primary} />
<Icon name={'apps'} size={24} color={colors.primary} />
<Icon name={'layers'} size={24} color={colors.primary} />
<Icon name={'widgets'} size={24} color={colors.primary} />
<Icon name={'clipboard-text'} size={24} color={colors.primary} />
```

## Properties

| Name     | Type     | Description                                     |
| -------- | -------- | ----------------------------------------------- |
| name     | `string` | A name of icon registered in a specific pack.   |
| size     | `int`    | Size of the icon                                |
| color    | `string` | Color of the icon                               |
| ...props | `any`    | Accepts any props available in a specific pack. |