---
layout: docs
title: Stroke
description: null
---

| Class                  | Description                                |
| ---------------------- | ------------------------------------------ |
| `stroke-current-color` | Applies `stroke: currentColor;` to element |
| `stroke-inherit`       | Applies `stroke: inherit;` to element      |

## Colors

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-white" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-black" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-white" ... />
<circle class="stroke-black" ... />
```

## Shades

### Light

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-light-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-light" ... />
<circle class="stroke-light-50" ... />
<circle class="stroke-light-100" ... />
<circle class="stroke-light-200" ... />
<circle class="stroke-light-300" ... />
<circle class="stroke-light-400" ... />
<circle class="stroke-light-500" ... />
<circle class="stroke-light-600" ... />
<circle class="stroke-light-700" ... />
<circle class="stroke-light-800" ... />
<circle class="stroke-light-900" ... />
```

### Grey

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-grey-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-grey" ... />
<circle class="stroke-grey-50" ... />
<circle class="stroke-grey-100" ... />
<circle class="stroke-grey-200" ... />
<circle class="stroke-grey-300" ... />
<circle class="stroke-grey-400" ... />
<circle class="stroke-grey-500" ... />
<circle class="stroke-grey-600" ... />
<circle class="stroke-grey-700" ... />
<circle class="stroke-grey-800" ... />
<circle class="stroke-grey-900" ... />
```

### Dark

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-dark-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-dark" ... />
<circle class="stroke-dark-50" ... />
<circle class="stroke-dark-100" ... />
<circle class="stroke-dark-200" ... />
<circle class="stroke-dark-300" ... />
<circle class="stroke-dark-400" ... />
<circle class="stroke-dark-500" ... />
<circle class="stroke-dark-600" ... />
<circle class="stroke-dark-700" ... />
<circle class="stroke-dark-800" ... />
<circle class="stroke-dark-900" ... />
```

## Palettes

### Primary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-primary-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-primary" ... />
<circle class="stroke-primary-50" ... />
<circle class="stroke-primary-100" ... />
<circle class="stroke-primary-200" ... />
<circle class="stroke-primary-300" ... />
<circle class="stroke-primary-400" ... />
<circle class="stroke-primary-500" ... />
<circle class="stroke-primary-600" ... />
<circle class="stroke-primary-700" ... />
<circle class="stroke-primary-800" ... />
<circle class="stroke-primary-900" ... />
```

### Secondary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-secondary-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-secondary" ... />
<circle class="stroke-secondary-50" ... />
<circle class="stroke-secondary-100" ... />
<circle class="stroke-secondary-200" ... />
<circle class="stroke-secondary-300" ... />
<circle class="stroke-secondary-400" ... />
<circle class="stroke-secondary-500" ... />
<circle class="stroke-secondary-600" ... />
<circle class="stroke-secondary-700" ... />
<circle class="stroke-secondary-800" ... />
<circle class="stroke-secondary-900" ... />
```

### Tertiary

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-tertiary-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-tertiary" ... />
<circle class="stroke-tertiary-50" ... />
<circle class="stroke-tertiary-100" ... />
<circle class="stroke-tertiary-200" ... />
<circle class="stroke-tertiary-300" ... />
<circle class="stroke-tertiary-400" ... />
<circle class="stroke-tertiary-500" ... />
<circle class="stroke-tertiary-600" ... />
<circle class="stroke-tertiary-700" ... />
<circle class="stroke-tertiary-800" ... />
<circle class="stroke-tertiary-900" ... />
```

## Indicators

### Error

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-error-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-error" ... />
<circle class="stroke-error-50" ... />
<circle class="stroke-error-100" ... />
<circle class="stroke-error-200" ... />
<circle class="stroke-error-300" ... />
<circle class="stroke-error-400" ... />
<circle class="stroke-error-500" ... />
<circle class="stroke-error-600" ... />
<circle class="stroke-error-700" ... />
<circle class="stroke-error-800" ... />
<circle class="stroke-error-900" ... />
```

### Warning

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-warning-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-warning" ... />
<circle class="stroke-warning-50" ... />
<circle class="stroke-warning-100" ... />
<circle class="stroke-warning-200" ... />
<circle class="stroke-warning-300" ... />
<circle class="stroke-warning-400" ... />
<circle class="stroke-warning-500" ... />
<circle class="stroke-warning-600" ... />
<circle class="stroke-warning-700" ... />
<circle class="stroke-warning-800" ... />
<circle class="stroke-warning-900" ... />
```

### Success

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-success-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-success" ... />
<circle class="stroke-success-50" ... />
<circle class="stroke-success-100" ... />
<circle class="stroke-success-200" ... />
<circle class="stroke-success-300" ... />
<circle class="stroke-success-400" ... />
<circle class="stroke-success-500" ... />
<circle class="stroke-success-600" ... />
<circle class="stroke-success-700" ... />
<circle class="stroke-success-800" ... />
<circle class="stroke-success-900" ... />
```

### Info

<div>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-50" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-100" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-200" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-300" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-400" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-500" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-600" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-700" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-800" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
  <svg width="16" height="16" viewBox="0 0 16 16">
    <circle class="stroke-info-900" stroke-width="4" fill="none" cx="8" cy="8" r="6"/>
  </svg>
</div>

```html
<circle class="stroke-info" ... />
<circle class="stroke-info-50" ... />
<circle class="stroke-info-100" ... />
<circle class="stroke-info-200" ... />
<circle class="stroke-info-300" ... />
<circle class="stroke-info-400" ... />
<circle class="stroke-info-500" ... />
<circle class="stroke-info-600" ... />
<circle class="stroke-info-700" ... />
<circle class="stroke-info-800" ... />
<circle class="stroke-info-900" ... />
```
