--- category: Components type: General title: Icon toc: false --- Semantic vector graphics. ## Icons naming convention We provide semantic name for every icon, and naming rules are as follows: - Scanning line icon has the similar name with its solid one,but it's distinguished by `-o`, for example, `question-circle` (a full circle) and `question-circle-o` (an empty circle); - Naming sequence:`[name]-[shape?]-[outline?]-[direction?]`. > `?` means is optional. See more design detail at [here](/docs/spec/icon). ## How To Use Use tag to create an icon and set its type in the type prop, for example: ```html ``` ## Local deployment By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。 ## List of icons > Click the icon and copy the code。 ### Directional Icons ```__react import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ### Suggested Icons ```__react import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ### Application Icons ```__react import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ### Brand and Logos ```__react import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ## API You can set `style` and `className` for size and color of icons because they are still fonts in essence. ```jsx ``` | Property | Description | Type | Default | |----------|------------------|------- |---------| | type | Type of ant design icon | string | - | | spin | Rotate icon with animation | boolean | false | | style | style properties of icon, like fontSize and color | object | - |