---
name: "Icon"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
  - { name: "@ray-js/icons", version: "1.6.0" }
title: "Icon - Icon component"
---

## Icon

> [VERSION] @ray-js/ray >= 0.5.10 | @ray-js/icons >= 1.6.0

### Description

Icon component providing a rich icon library, with customizable size and color. Starting from @ray-js/ray@1.6.0, the Icon component is no longer built-in and must be installed separately via @ray-js/icons.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `"icon-warning" \| "icon-right" \| "icon-up" \| "icon-down" \| "icon-right-copy" \| "icon-right-copy1" \| "icon-a-cloudsunboltfill" \| "icon-a-cloudhailfill" \| "icon-a-cloudrainfill" \| "icon-deskclock" \| "icon-a-cloudsleetfill" \| "icon-a-arrowtrianglecapsulepath" \| "icon-a-cloudfogfill" \| "icon-a-clouddrizzlefill" \| "icon-a-cloudsunrainfill" \| "icon-a-crownfill" \| "icon-a-deskclockfill" \| "icon-a-envelopeopenfill" \| "icon-a-desktopcomputerandarrowdown" \| "icon-a-ferryfill" \| "icon-a-dropfill" \| "icon-a-cloudmoonfill" \| "icon-a-icloudandarrowdownfill" \| "icon-a-heartfill" \| "icon-a-icloudcirclefill" \| "icon-a-giftfill" \| "icon-a-handpointupleftfill" \| "icon-icon" \| "icon-a-exclamationmarkicloudfill" \| "icon-a-facesmilingfill" \| "icon-a-cloudsunfill" \| "icon-a-figurewalk" \| "icon-a-envelopebadge" \| "icon-a-locationnorthfill" \| "icon-a-minussquarefill" \| "icon-a-icloudslashfill" \| "icon-a-lockicloudfill" \| "icon-a-flamefill" \| "icon-left" \| "icon-a-linkicloudfill" \| "icon-a-micfill" \| "icon-icon-2" \| "icon-a-latch2casefill" \| "icon-a-exclamationmarkbubblefill" \| "icon-a-pausefill" \| "icon-a-paintbrushfill" \| "icon-a-moonfill" \| "icon-a-keyicloudfill" \| "icon-a-messagefill" \| "icon-a-envelopefill" \| "icon-a-moonstarsfill" \| "icon-a-icloudandarrowupfill" \| "icon-checkmark-3" \| "icon-a-locationcirclefill" \| "icon-a-forwardendaltfill" \| "icon-a-clockfill" \| "icon-bonjour" \| "icon-a-icloudcircle" \| "icon-a-leaffill" \| "icon-a-paintbrushpointedfill" \| "icon-a-cloudsnowfill" \| "icon-a-playfill" \| "icon-a-plussquarefill" \| "icon-a-minuscirclefill" \| "icon-a-personicloudfill" \| "icon-a-phonefill" \| "icon-a-pawprintfill" \| "icon-plus" \| "icon-a-scribblevariable" \| "icon-a-phoneandwaveformfill" \| "icon-a-phonedownfill" \| "icon-a-pluscirclefill" \| "icon-a-repeat1" \| "icon-a-printerfillandpaperfill" \| "icon-a-scrollfill" \| "icon-snow" \| "icon-a-speakerwave1fill" \| "icon-scissors" \| "icon-a-playrectanglefill" \| "icon-a-globeamericasfill" \| "icon-a-dotradiowavesleftandright" \| "icon-minus" \| "icon-a-stopfill" \| "icon-a-suitcasefill" \| "icon-a-sunrisefill" \| "icon-a-thermometersunfill" \| "icon-a-trainsidefrontcar" \| "icon-a-speakerwave3fill" \| "icon-a-cloudheavyrainfill" \| "icon-a-eyedropperhalffull" \| "icon-a-sunminfill" \| "icon-a-sunsetfill" \| "icon-a-timersquare" \| "icon-stopwatch" \| "icon-thermometer" \| "icon-repeat" \| "icon-a-stopwatchfill" \| "icon-a-sunmaxfill" \| "icon-a-icloudfill" \| "icon-a-tramfill" \| "icon-tornado" \| "icon-a-videoslashfill" \| "icon-personalhotspot" \| "icon-a-thermometersnowflake" \| "icon-a-sunhazefill" \| "icon-a-videofill" \| "icon-sparkles" \| "icon-a-facemaskfill" \| "icon-a-wave3backwardcirclefill" \| "icon-a-wave3leftcirclefill" \| "icon-a-wandandstarsinverse" \| "icon-a-wave3rightcirclefill" \| "icon-xmark" \| "icon-a-wave3right" \| "icon-a-waveformandmic" \| "icon-a-wifiexclamationmark" \| "icon-wifi" \| "icon-a-xmarkicloudfill" \| "icon-wind" \| "icon-timer" \| "icon-a-wrenchandscrewdriverfill" \| "icon-a-wave3forwardcirclefill" \| "icon-a-lockfill" \| "icon-a-wifislash" \| "icon-a-windsnow" \| "icon-a-wave3forward" \| "icon-cancel" \| "icon-a-arrowbackward" \| "icon-a-arrowdown" \| "icon-alarm" \| "icon-a-alarmfill" \| "icon-a-airplanedeparture" \| "icon-a-arrowlefttolinealt" \| "icon-a-arrowforward" \| "icon-airplane" \| "icon-a-arrow2squarepath" \| "icon-a-antennaradiowavesleftandright" \| "icon-a-arrowshapeturnuprightfill" \| "icon-a-arrowcounterclockwise" \| "icon-a-arrowturndownleft" \| "icon-a-arrowturnupleft" \| "icon-a-airplanearrival" \| "icon-a-boltfill" \| "icon-a-arrowturnrightup" \| "icon-a-arrowcounterclockwiseicloudfill" \| "icon-a-bellfill" \| "icon-a-arrowupanddownandarrowleftandright" \| "icon-a-beddoublefill" \| "icon-a-arrowshapeturnupleft2fill" \| "icon-a-arrowtrianglerightfillandlineverticalandarr" \| "icon-a-bolthorizontalicloudfill" \| "icon-a-boltheartfill" \| "icon-a-arrowupleftanddownrightandarrowuprightan" \| "icon-a-arrowclockwiseicloudfill" \| "icon-a-arrowupbackwardandarrowdownforward" \| "icon-a-arrowturndownright" \| "icon-bold" \| "icon-a-arrowleftarrowright" \| "icon-a-bolthorizontalfill" \| "icon-checkmark" \| "icon-a-arrowrighttolinealt" \| "icon-a-bubblerightfill" \| "icon-checkmark-2" \| "icon-clock" \| "icon-a-carfill" \| "icon-a-backwardendaltfill" \| "icon-checkmark-4" \| "icon-a-chevronright2" \| "icon-a-cloudboltrainfill" \| "icon-a-bolthorizontalcirclefill" \| "icon-a-chevronleft2" \| "icon-a-chevroncompactdown" \| "icon-a-briefcasefill" \| "icon-a-arrowturnupright" \| "icon-a-cloudboltfill" \| "icon-a-cloudfill" \| "icon-a-bubbleleftandbubblerightfill" \| "icon-a-bellbadgefill" \| "icon-checkmark-1" \| "icon-a-cloudmoonrainfill" \| "icon-a-chevroncompactright" \| "icon-a-crossfill" \| "icon-a-busfill" \| "icon-a-arrowturnleftup" \| "icon-a-cloudmoonboltfill" \| "icon-a-arrowtriangleleftfillandlineverticalandarro" \| "icon-a-checkmarkicloudfill"` | Yes | `"icon-warning"` | Icon type (built-in icon name) |
| `size` | `number` | No | `16` | Icon size, in px |
| `color` | `string` | No | `"#333333"` | Icon color |

### Examples

#### Basic usage

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-right" size={24} />
      <Icon type="icon-warning" size={24} />
      <Icon type="icon-checkmark" size={24} />
      <Icon type="icon-cancel" size={24} />
    </View>
  );
}
```

#### Custom size

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', alignItems: 'center', gap: 15 }}>
      <Icon type="icon-right" size={16} color="#007aff" />
      <Icon type="icon-right" size={24} color="#007aff" />
      <Icon type="icon-right" size={32} color="#007aff" />
      <Icon type="icon-right" size={48} color="#007aff" />
    </View>
  );
}
```

#### Custom color

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { Icon } from '@ray-js/icons';

export default function Demo() {
  return (
    <View style={{ padding: 20, flexDirection: 'row', gap: 15 }}>
      <Icon type="icon-warning" size={30} color="#ff4d4f" />
      <Icon type="icon-checkmark" size={30} color="#52c41a" />
      <Icon type="icon-a-cloudrainfill" size={30} color="#1890ff" />
      <Icon type="icon-a-cloudsleetfill" size={30} color="#722ed1" />
    </View>
  );
}
```


### Effect

<iframe src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/iconDemo/demo_index.html?s=3" style={{width: '100%', height: '500px'}} frameborder="0"></iframe>