# Icon

----

For semantic vector graphics, `AT-UI` use the open source [Feather](https://feathericons.com/) as the ICON library, and make `Icon Font`. `Feather` use `24x24` sizes, with rounded corners, consistent stroke widths.

## How To Use

Use `class="icon"` to declare the icon and set the proper classname.

:::demo
```html
<i class="icon icon-zoom-in"></i>
<i class="icon icon-zoom-out"></i>
<i class="icon icon-check"></i>
<i class="icon icon-x"></i>
```
:::

## List of Icons

### Main

<icon-list type="core"></icon-list>

### Media Control

<icon-list type="media"></icon-list>

### Communication

<icon-list type="communication"></icon-list>

### Photo

<icon-list type="photo"></icon-list>

### Location

<icon-list type="location"></icon-list>

### Weather

<icon-list type="weather"></icon-list>

### Arrows

<icon-list type="arrows"></icon-list>

### LOGO

<icon-list type="logos"></icon-list>


<style lang="scss" scoped>
.icon {
  font-size: 20px;
  margin-right: 10px;
}
</style>