---
layout: docs
title: Icon
description: null
---

## Example

<div>
  <svg class="icon" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
</div>

### HTML

```html
<svg class="icon">...</svg>
```

### CSS

```scss
--icon-size: var(--icon-m-size);
```

## Sizes

<div>
  <svg class="icon-xxl" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xl" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-l" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-m" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-s" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xs" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
  <svg class="icon-xxs" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="8" cy="8" r="8"/>
  </svg>
</div>

### HTML

```html
<svg class="icon-xxl">...</svg>
<svg class="icon-xl">...</svg>
<svg class="icon-l">...</svg>
<svg class="icon-m">...</svg>
<svg class="icon-s">...</svg>
<svg class="icon-xs">...</svg>
<svg class="icon-xxs">...</svg>
```

### CSS

```scss
--icon-xxl-size: 6rem;
--icon-xl-size: 5rem;
--icon-l-size: 4rem;
--icon-m-size: 3rem;
--icon-s-size: 2rem;
--icon-xs-size: 1.5rem;
--icon-xxs-size: 1rem;
```