---
name: Icon 图标
route: /icon
parent: 组件
menu: 通用
---
import { Playground, Props } from 'docz'
import Icon from 'kwai-icon'
import {Icon as IconProps} from '../components/icon'
import IconSearch from './components/IconSearch'

# Icon
>提示: 展开代码编辑器可以在线编辑，实时生效


<IconSearch/>


## 所有Icon

<Playground>
<Icon name='Add'/>
<Icon name='AddPadding'/>
<Icon name='Attachment'/>
<Icon name='Back'/>
<Icon name='Bell'/>
<Icon name='BreadLeft'/>
<Icon name='BreadRight'/>
<Icon name='Camera'/>
<Icon name='Charts'/>
<Icon name='Checked'/>
<Icon name='CheckedCircle'/>
<Icon name='CheckedInvert'/>
<Icon name='Close'/>
<Icon name='CloseInvert'/>
<Icon name='Code'/>
<Icon name='Copy'/>
<Icon name='Date'/>
<Icon name='Decline'/>
<Icon name='DoubleLeft'/>
<Icon name='DoubleRight'/>
<Icon name='DropDown'/>
<Icon name='Edit'/>
<Icon name='ErrorCircle'/>
<Icon name='Eye'/>
<Icon name='Forward'/>
<Icon name='Help'/>
<Icon name='HelpInvert'/>
<Icon name='Home'/>
<Icon name='Info'/>
<Icon name='InfoInvert'/>
<Icon name='InfoOutline'/>
<Icon name='Left'/>
<Icon name='MinusInvert'/>
<Icon name='More'/>
<Icon name='Person'/>
<Icon name='Refresh'/>
<Icon name='Right'/>
<Icon name='Rise'/>
<Icon name='Search'/>
<Icon name='Smile'/>
<Icon name='Sort'/>
<Icon name='Statistics'/>
<Icon name='Trash'/>
<Icon name='Upload'/>
<Icon name='UploadCloud'/>
<Icon name='Warning'/>

</Playground>

## size
可以输入的值： large, medium, small
<Playground>
  <Icon name='Home' size='large' color='black'/>
  <Icon name='Home' size='medium' color='black'/>
  <Icon name='Home' size='small' color='black'/>
</Playground>


## color

所有合法的css颜色值都可以

<Playground>
  <Icon name='Person' size='large' color='black'/>
  <Icon name='Person' size='large' color='red'/>
  <Icon name='Person' size='large' color='#3CCC3B'/>
</Playground>

## API

<Props of={IconProps} />