djc-heroicons

Name	djc-heroicons JSON
Version	1.0.1 JSON
	download
home_page	None
Summary	Icons from HeroIcons.com for django-components
upload_time	2025-01-08 20:21:15
maintainer	None
docs_url	None
author	None
requires_python	<4.0,>=3.8
license	MIT
keywords	django components heroicons icon component html
VCS
bugtrack_url
requirements	No requirements were recorded.
Travis-CI	No Travis.
coveralls test coverage	No coveralls.

            # djc-heroicons

[![PyPI - Version](https://img.shields.io/pypi/v/djc-heroicons)](https://pypi.org/project/djc-heroicons/) [![PyPI - Python Version](https://img.shields.io/pypi/pyversions/djc-heroicons)](https://pypi.org/project/djc-heroicons/) [![PyPI - License](https://img.shields.io/pypi/l/djc-heroicons)](https://github.com/JuroOravec/djc-heroicons/blob/main/LICENSE) [![PyPI - Downloads](https://img.shields.io/pypi/dm/djc-heroicons)](https://pypistats.org/packages/djc-heroicons) [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/JuroOravec/djc-heroicons/tests.yml)](https://github.com/JuroOravec/djc-heroicons/actions/workflows/tests.yml)

_[HeroIcons.com](https://heroicons.com) icons for [django-components](https://pypi.org/project/django-components/)._

```bash
pip install djc-heroicons
```

## Overview

djc-heroicons adds an `Icon` component that renders an `<svg>` element with the icons from [HeroIcons.com](https://heroicons.com). This icon is accessible in Django templates as `{% component "icon" %}`.

Use the `name` kwarg to specify the icon name:

```django
<div>
  Items:
  <ul>
    <li>
      {% component "icon" name="academic-cap" / %}
    </li>
  </ul>
</div>
```

By default the component renders the `"outline"` variant. To render the `"solid"` variant of the icon, set kwarg `variant` to `"solid"`:

```django
{% component "icon" name="academic-cap" variant="solid" / %}
```

Common changes like color, size, or stroke width can all be set directly on the component:

```django
{% component "icon"
   name="academic-cap"
   size=48
   color="red"
   stroke_width=1.2
/ %}
```

If you need to pass attributes to the `<svg>` element, you can use the `attrs` kwarg, which accepts a dictionary:

```django
{% component "icon"
   name="academic-cap"
   attrs:id="my-svg"
   attrs:class="p-4 mb-3"
   attrs:data-id="test-123"
/ %}
```

See all available input for `Icon` component in [API reference](#api-reference).

## Usage in Python

All of the above is possible also from within Python, by importing `Icon`:

```py
from djc_heroicons import Icon

content = Icon.render(
    kwargs={
        "name": "academic-cap",
        "variant": "solid",
        "size": 48,
        "attrs": {
            "id": "my-svg",
            "class": "p-4 mb-3",
        },
    },
)
```

## Installation

1. Install the package:

   ```bash
   pip install djc-heroicons
   ```

2. Add the package to `INSTALLED_APPS` of your Django project:

   ```py
   INSTALLED_APPS = [
       ...
       "django_components",
       "djc_heroicons",
       ...
   ]
   ```

## Settings

You can configure the behavior of the djc-heroicons library
by setting a `DJC_HEROICONS` variable in your Django settings file.

`DJC_HEROICONS` can be either a plain dictionary, or a instance of `HeroIconSettings`. The latter helps with intellisense and type hints:

```py
DJC_HEROICONS = {
   "registry": custom_registry,
}

# or

from djc_heroicons import HeroIconsSettings

DJC_HEROICONS = HeroIconsSettings(
   registry=custom_registry,
)
```

### `registry`

`ComponentRegistry | str | None = None`

The django-components' [`ComponentRegistry`](https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/) to which the icon component should be registered.

If `None`, the icon is registered into the default registry.

```python
custom_registry = ComponentRegistry()

DJC_HEROICONS = HeroIconsSettings(
   registry=custom_registry,
)
```

### `component_name`

`str | None = "icon"`

The name under which the Icon component will be available from within Django templates.

If `None`, the component is registered with the name `"icon"`.

```html
{% component "icon" name="academic-cap" / %}
```

**Example:**

If you set this to `"heroicons"`:

```python
DJC_HEROICONS = HeroIconsSettings(
   component_name="heroicons",
)
```

You will use the component like this:

```html
{% component "heroicons" name="academic-cap" / %}
```

## API reference

### `Icon` / `{% component "icon" %}`

The Icon component accepts following kwargs:

#### `name`

`str` - required

The icon name from [HeroIcons.com](https://heroicons.com), e.g. `arrow-left-circle`.

#### `variant`

`"outline" | "solid" = "outline"`

The icon variant - `"outline"` or `"solid"`. Defaults to `"outline"`.

#### `size`

`int = 24`

The icon size in pixels. Defaults to `24`.

#### `color`

`str = "currentColor"`

The icon color. Defaults to `"currentColor"`.

- If the icon is `"outline"`, this sets the stroke color.
- If the icon is `"solid"`, this sets the fill color.

#### `stroke_width`

`float = 1.5`

The icon [stroke width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width). Applies only to the `"outline"` variant. Defaults to `1.5`.

#### `viewbox`

`str = "0 0 24 24"`

The icon SVG's [viewbox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewbox). Defaults to `"0 0 24 24"`.

#### `attrs`

`Dict | None = None`

Optional dictionary to pass HTML attributes to the icon's SVG element.

### `HeroIconsSettings`

NamedTuple for adding intellisense and type hinting to the settings. See [Settings](#settings).

### `IconName`

Type alias that holds all the valid icon names, e.g.

`Literal["arrow-left-circle", "arrow-down", ...]`

Use this for type validation and intellisense.

**Example:**

In the example below, the `"icon"` key of `menu` is typed, so Mypy or other linters pick it up as an error:

```py
from typing import List, TypedDict

from djc_heroicons import IconName

class MenuItem(TypedDict):
    name: str
    icon: IconName

menu: List[MenuItem]: = [
   {"name": "Home", "icon": "home"},
   {"name": "Settings", "icon": "cog-6-tooth"},
   {"name": "Account", "icon": "user-circe"},  <-- Typo!
]
```

## Release notes

Read the [Release Notes](https://github.com/JuroOravec/djc-heroicons/tree/main/CHANGELOG.md)
to see the latest features and fixes.

<!-- INSERT_ICONS_START -->
## Icons



---

### Outline

<div style="display: flex; flex-wrap: wrap; font-family: monospace; ">
<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_academic-cap.png" width="50">
    academic-cap
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_adjustments-horizontal.png" width="50">
    adjustments-horizontal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_adjustments-vertical.png" width="50">
    adjustments-vertical
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box-arrow-down.png" width="50">
    archive-box-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box-x-mark.png" width="50">
    archive-box-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box.png" width="50">
    archive-box
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-circle.png" width="50">
    arrow-down-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-left.png" width="50">
    arrow-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-on-square-stack.png" width="50">
    arrow-down-on-square-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-on-square.png" width="50">
    arrow-down-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-right.png" width="50">
    arrow-down-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-tray.png" width="50">
    arrow-down-tray
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down.png" width="50">
    arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-circle.png" width="50">
    arrow-left-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-end-on-rectangle.png" width="50">
    arrow-left-end-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-start-on-rectangle.png" width="50">
    arrow-left-start-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left.png" width="50">
    arrow-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-down.png" width="50">
    arrow-long-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-left.png" width="50">
    arrow-long-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-right.png" width="50">
    arrow-long-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-up.png" width="50">
    arrow-long-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-path-rounded-square.png" width="50">
    arrow-path-rounded-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-path.png" width="50">
    arrow-path
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-circle.png" width="50">
    arrow-right-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-end-on-rectangle.png" width="50">
    arrow-right-end-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-start-on-rectangle.png" width="50">
    arrow-right-start-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right.png" width="50">
    arrow-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-top-right-on-square.png" width="50">
    arrow-top-right-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-trending-down.png" width="50">
    arrow-trending-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-trending-up.png" width="50">
    arrow-trending-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-down-left.png" width="50">
    arrow-turn-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-down-right.png" width="50">
    arrow-turn-down-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-left-down.png" width="50">
    arrow-turn-left-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-left-up.png" width="50">
    arrow-turn-left-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-right-down.png" width="50">
    arrow-turn-right-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-right-up.png" width="50">
    arrow-turn-right-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-up-left.png" width="50">
    arrow-turn-up-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-up-right.png" width="50">
    arrow-turn-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-circle.png" width="50">
    arrow-up-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-left.png" width="50">
    arrow-up-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-on-square-stack.png" width="50">
    arrow-up-on-square-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-on-square.png" width="50">
    arrow-up-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-right.png" width="50">
    arrow-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-tray.png" width="50">
    arrow-up-tray
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up.png" width="50">
    arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-down.png" width="50">
    arrow-uturn-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-left.png" width="50">
    arrow-uturn-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-right.png" width="50">
    arrow-uturn-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-up.png" width="50">
    arrow-uturn-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-pointing-in.png" width="50">
    arrows-pointing-in
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-pointing-out.png" width="50">
    arrows-pointing-out
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-right-left.png" width="50">
    arrows-right-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-up-down.png" width="50">
    arrows-up-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_at-symbol.png" width="50">
    at-symbol
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_backspace.png" width="50">
    backspace
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_backward.png" width="50">
    backward
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_banknotes.png" width="50">
    banknotes
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-2.png" width="50">
    bars-2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-bottom-left.png" width="50">
    bars-3-bottom-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-bottom-right.png" width="50">
    bars-3-bottom-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-center-left.png" width="50">
    bars-3-center-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3.png" width="50">
    bars-3
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-4.png" width="50">
    bars-4
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-arrow-down.png" width="50">
    bars-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-arrow-up.png" width="50">
    bars-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-0.png" width="50">
    battery-0
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-100.png" width="50">
    battery-100
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-50.png" width="50">
    battery-50
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_beaker.png" width="50">
    beaker
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-alert.png" width="50">
    bell-alert
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-slash.png" width="50">
    bell-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-snooze.png" width="50">
    bell-snooze
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell.png" width="50">
    bell
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bold.png" width="50">
    bold
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bolt-slash.png" width="50">
    bolt-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bolt.png" width="50">
    bolt
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_book-open.png" width="50">
    book-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark-slash.png" width="50">
    bookmark-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark-square.png" width="50">
    bookmark-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark.png" width="50">
    bookmark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_briefcase.png" width="50">
    briefcase
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bug-ant.png" width="50">
    bug-ant
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-library.png" width="50">
    building-library
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-office-2.png" width="50">
    building-office-2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-office.png" width="50">
    building-office
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-storefront.png" width="50">
    building-storefront
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cake.png" width="50">
    cake
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calculator.png" width="50">
    calculator
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar-date-range.png" width="50">
    calendar-date-range
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar-days.png" width="50">
    calendar-days
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar.png" width="50">
    calendar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_camera.png" width="50">
    camera
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-bar-square.png" width="50">
    chart-bar-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-bar.png" width="50">
    chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-pie.png" width="50">
    chart-pie
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-bottom-center-text.png" width="50">
    chat-bubble-bottom-center-text
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-bottom-center.png" width="50">
    chat-bubble-bottom-center
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left-ellipsis.png" width="50">
    chat-bubble-left-ellipsis
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left-right.png" width="50">
    chat-bubble-left-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left.png" width="50">
    chat-bubble-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-oval-left-ellipsis.png" width="50">
    chat-bubble-oval-left-ellipsis
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-oval-left.png" width="50">
    chat-bubble-oval-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check-badge.png" width="50">
    check-badge
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check-circle.png" width="50">
    check-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check.png" width="50">
    check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-down.png" width="50">
    chevron-double-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-left.png" width="50">
    chevron-double-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-right.png" width="50">
    chevron-double-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-up.png" width="50">
    chevron-double-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-down.png" width="50">
    chevron-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-left.png" width="50">
    chevron-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-right.png" width="50">
    chevron-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-up-down.png" width="50">
    chevron-up-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-up.png" width="50">
    chevron-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_circle-stack.png" width="50">
    circle-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document-check.png" width="50">
    clipboard-document-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document-list.png" width="50">
    clipboard-document-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document.png" width="50">
    clipboard-document
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard.png" width="50">
    clipboard
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clock.png" width="50">
    clock
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud-arrow-down.png" width="50">
    cloud-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud-arrow-up.png" width="50">
    cloud-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud.png" width="50">
    cloud
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_code-bracket-square.png" width="50">
    code-bracket-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_code-bracket.png" width="50">
    code-bracket
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog-6-tooth.png" width="50">
    cog-6-tooth
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog-8-tooth.png" width="50">
    cog-8-tooth
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog.png" width="50">
    cog
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_command-line.png" width="50">
    command-line
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_computer-desktop.png" width="50">
    computer-desktop
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cpu-chip.png" width="50">
    cpu-chip
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_credit-card.png" width="50">
    credit-card
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cube-transparent.png" width="50">
    cube-transparent
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cube.png" width="50">
    cube
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-bangladeshi.png" width="50">
    currency-bangladeshi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-dollar.png" width="50">
    currency-dollar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-euro.png" width="50">
    currency-euro
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-pound.png" width="50">
    currency-pound
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-rupee.png" width="50">
    currency-rupee
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-yen.png" width="50">
    currency-yen
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cursor-arrow-rays.png" width="50">
    cursor-arrow-rays
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cursor-arrow-ripple.png" width="50">
    cursor-arrow-ripple
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_device-phone-mobile.png" width="50">
    device-phone-mobile
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_device-tablet.png" width="50">
    device-tablet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_divide.png" width="50">
    divide
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-arrow-down.png" width="50">
    document-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-arrow-up.png" width="50">
    document-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-chart-bar.png" width="50">
    document-chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-check.png" width="50">
    document-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-bangladeshi.png" width="50">
    document-currency-bangladeshi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-dollar.png" width="50">
    document-currency-dollar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-euro.png" width="50">
    document-currency-euro
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-pound.png" width="50">
    document-currency-pound
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-rupee.png" width="50">
    document-currency-rupee
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-yen.png" width="50">
    document-currency-yen
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-duplicate.png" width="50">
    document-duplicate
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-magnifying-glass.png" width="50">
    document-magnifying-glass
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-minus.png" width="50">
    document-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-plus.png" width="50">
    document-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-text.png" width="50">
    document-text
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document.png" width="50">
    document
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-horizontal-circle.png" width="50">
    ellipsis-horizontal-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-horizontal.png" width="50">
    ellipsis-horizontal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-vertical.png" width="50">
    ellipsis-vertical
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_envelope-open.png" width="50">
    envelope-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_envelope.png" width="50">
    envelope
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_equals.png" width="50">
    equals
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_exclamation-circle.png" width="50">
    exclamation-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_exclamation-triangle.png" width="50">
    exclamation-triangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye-dropper.png" width="50">
    eye-dropper
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye-slash.png" width="50">
    eye-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye.png" width="50">
    eye
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_face-frown.png" width="50">
    face-frown
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_face-smile.png" width="50">
    face-smile
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_film.png" width="50">
    film
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_finger-print.png" width="50">
    finger-print
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_fire.png" width="50">
    fire
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_flag.png" width="50">
    flag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-arrow-down.png" width="50">
    folder-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-minus.png" width="50">
    folder-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-open.png" width="50">
    folder-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-plus.png" width="50">
    folder-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder.png" width="50">
    folder
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_forward.png" width="50">
    forward
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_funnel.png" width="50">
    funnel
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gif.png" width="50">
    gif
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gift-top.png" width="50">
    gift-top
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gift.png" width="50">
    gift
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-alt.png" width="50">
    globe-alt
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-americas.png" width="50">
    globe-americas
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-asia-australia.png" width="50">
    globe-asia-australia
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-europe-africa.png" width="50">
    globe-europe-africa
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h1.png" width="50">
    h1
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h2.png" width="50">
    h2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h3.png" width="50">
    h3
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-raised.png" width="50">
    hand-raised
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-thumb-down.png" width="50">
    hand-thumb-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-thumb-up.png" width="50">
    hand-thumb-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hashtag.png" width="50">
    hashtag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_heart.png" width="50">
    heart
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_home-modern.png" width="50">
    home-modern
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_home.png" width="50">
    home
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_identification.png" width="50">
    identification
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox-arrow-down.png" width="50">
    inbox-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox-stack.png" width="50">
    inbox-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox.png" width="50">
    inbox
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_information-circle.png" width="50">
    information-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_italic.png" width="50">
    italic
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_key.png" width="50">
    key
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_language.png" width="50">
    language
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lifebuoy.png" width="50">
    lifebuoy
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_light-bulb.png" width="50">
    light-bulb
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_link-slash.png" width="50">
    link-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_link.png" width="50">
    link
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_list-bullet.png" width="50">
    list-bullet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lock-closed.png" width="50">
    lock-closed
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lock-open.png" width="50">
    lock-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-circle.png" width="50">
    magnifying-glass-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-minus.png" width="50">
    magnifying-glass-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-plus.png" width="50">
    magnifying-glass-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass.png" width="50">
    magnifying-glass
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_map-pin.png" width="50">
    map-pin
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_map.png" width="50">
    map
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_megaphone.png" width="50">
    megaphone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_microphone.png" width="50">
    microphone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_minus-circle.png" width="50">
    minus-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_minus.png" width="50">
    minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_moon.png" width="50">
    moon
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_musical-note.png" width="50">
    musical-note
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_newspaper.png" width="50">
    newspaper
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_no-symbol.png" width="50">
    no-symbol
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_numbered-list.png" width="50">
    numbered-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paint-brush.png" width="50">
    paint-brush
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paper-airplane.png" width="50">
    paper-airplane
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paper-clip.png" width="50">
    paper-clip
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pause-circle.png" width="50">
    pause-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pause.png" width="50">
    pause
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pencil-square.png" width="50">
    pencil-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pencil.png" width="50">
    pencil
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_percent-badge.png" width="50">
    percent-badge
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-arrow-down-left.png" width="50">
    phone-arrow-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-arrow-up-right.png" width="50">
    phone-arrow-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-x-mark.png" width="50">
    phone-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone.png" width="50">
    phone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_photo.png" width="50">
    photo
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play-circle.png" width="50">
    play-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play-pause.png" width="50">
    play-pause
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play.png" width="50">
    play
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_plus-circle.png" width="50">
    plus-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_plus.png" width="50">
    plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_power.png" width="50">
    power
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_presentation-chart-bar.png" width="50">
    presentation-chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_presentation-chart-line.png" width="50">
    presentation-chart-line
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_printer.png" width="50">
    printer
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_puzzle-piece.png" width="50">
    puzzle-piece
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_qr-code.png" width="50">
    qr-code
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_question-mark-circle.png" width="50">
    question-mark-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_queue-list.png" width="50">
    queue-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_radio.png" width="50">
    radio
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_receipt-percent.png" width="50">
    receipt-percent
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_receipt-refund.png" width="50">
    receipt-refund
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rectangle-group.png" width="50">
    rectangle-group
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rectangle-stack.png" width="50">
    rectangle-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rocket-launch.png" width="50">
    rocket-launch
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rss.png" width="50">
    rss
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_scale.png" width="50">
    scale
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_scissors.png" width="50">
    scissors
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_server-stack.png" width="50">
    server-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_server.png" width="50">
    server
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_share.png" width="50">
    share
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shield-check.png" width="50">
    shield-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shield-exclamation.png" width="50">
    shield-exclamation
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shopping-bag.png" width="50">
    shopping-bag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shopping-cart.png" width="50">
    shopping-cart
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_signal-slash.png" width="50">
    signal-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_signal.png" width="50">
    signal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_slash.png" width="50">
    slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_sparkles.png" width="50">
    sparkles
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_speaker-wave.png" width="50">
    speaker-wave
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_speaker-x-mark.png" width="50">
    speaker-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_square-2-stack.png" width="50">
    square-2-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_square-3-stack-3d.png" width="50">
    square-3-stack-3d
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_squares-2x2.png" width="50">
    squares-2x2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_squares-plus.png" width="50">
    squares-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_star.png" width="50">
    star
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_stop-circle.png" width="50">
    stop-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_stop.png" width="50">
    stop
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_strikethrough.png" width="50">
    strikethrough
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_sun.png" width="50">
    sun
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_swatch.png" width="50">
    swatch
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_table-cells.png" width="50">
    table-cells
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_tag.png" width="50">
    tag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ticket.png" width="50">
    ticket
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_trash.png" width="50">
    trash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_trophy.png" width="50">
    trophy
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_truck.png" width="50">
    truck
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_tv.png" width="50">
    tv
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_underline.png" width="50">
    underline
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-circle.png" width="50">
    user-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-group.png" width="50">
    user-group
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-minus.png" width="50">
    user-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-plus.png" width="50">
    user-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user.png" width="50">
    user
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_users.png" width="50">
    users
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_variable.png" width="50">
    variable
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_video-camera-slash.png" width="50">
    video-camera-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_video-camera.png" width="50">
    video-camera
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_view-columns.png" width="50">
    view-columns
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_viewfinder-circle.png" width="50">
    viewfinder-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wallet.png" width="50">
    wallet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wifi.png" width="50">
    wifi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_window.png" width="50">
    window
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wrench-screwdriver.png" width="50">
    wrench-screwdriver
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wrench.png" width="50">
    wrench
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_x-circle.png" width="50">
    x-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_x-mark.png" width="50">
    x-mark
</div>
</div>


---

### Solid

<div style="display: flex; flex-wrap: wrap; font-family: monospace; ">
<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_academic-cap.png" width="50">
    academic-cap
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_adjustments-horizontal.png" width="50">
    adjustments-horizontal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_adjustments-vertical.png" width="50">
    adjustments-vertical
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box-arrow-down.png" width="50">
    archive-box-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box-x-mark.png" width="50">
    archive-box-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box.png" width="50">
    archive-box
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-circle.png" width="50">
    arrow-down-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-left.png" width="50">
    arrow-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-on-square-stack.png" width="50">
    arrow-down-on-square-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-on-square.png" width="50">
    arrow-down-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-right.png" width="50">
    arrow-down-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-tray.png" width="50">
    arrow-down-tray
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down.png" width="50">
    arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-circle.png" width="50">
    arrow-left-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-end-on-rectangle.png" width="50">
    arrow-left-end-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-start-on-rectangle.png" width="50">
    arrow-left-start-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left.png" width="50">
    arrow-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-down.png" width="50">
    arrow-long-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-left.png" width="50">
    arrow-long-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-right.png" width="50">
    arrow-long-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-up.png" width="50">
    arrow-long-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-path-rounded-square.png" width="50">
    arrow-path-rounded-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-path.png" width="50">
    arrow-path
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-circle.png" width="50">
    arrow-right-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-end-on-rectangle.png" width="50">
    arrow-right-end-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-start-on-rectangle.png" width="50">
    arrow-right-start-on-rectangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right.png" width="50">
    arrow-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-top-right-on-square.png" width="50">
    arrow-top-right-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-trending-down.png" width="50">
    arrow-trending-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-trending-up.png" width="50">
    arrow-trending-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-down-left.png" width="50">
    arrow-turn-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-down-right.png" width="50">
    arrow-turn-down-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-left-down.png" width="50">
    arrow-turn-left-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-left-up.png" width="50">
    arrow-turn-left-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-right-down.png" width="50">
    arrow-turn-right-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-right-up.png" width="50">
    arrow-turn-right-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-up-left.png" width="50">
    arrow-turn-up-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-up-right.png" width="50">
    arrow-turn-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-circle.png" width="50">
    arrow-up-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-left.png" width="50">
    arrow-up-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-on-square-stack.png" width="50">
    arrow-up-on-square-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-on-square.png" width="50">
    arrow-up-on-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-right.png" width="50">
    arrow-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-tray.png" width="50">
    arrow-up-tray
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up.png" width="50">
    arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-down.png" width="50">
    arrow-uturn-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-left.png" width="50">
    arrow-uturn-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-right.png" width="50">
    arrow-uturn-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-up.png" width="50">
    arrow-uturn-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-pointing-in.png" width="50">
    arrows-pointing-in
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-pointing-out.png" width="50">
    arrows-pointing-out
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-right-left.png" width="50">
    arrows-right-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-up-down.png" width="50">
    arrows-up-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_at-symbol.png" width="50">
    at-symbol
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_backspace.png" width="50">
    backspace
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_backward.png" width="50">
    backward
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_banknotes.png" width="50">
    banknotes
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-2.png" width="50">
    bars-2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-bottom-left.png" width="50">
    bars-3-bottom-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-bottom-right.png" width="50">
    bars-3-bottom-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-center-left.png" width="50">
    bars-3-center-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3.png" width="50">
    bars-3
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-4.png" width="50">
    bars-4
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-arrow-down.png" width="50">
    bars-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-arrow-up.png" width="50">
    bars-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-0.png" width="50">
    battery-0
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-100.png" width="50">
    battery-100
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-50.png" width="50">
    battery-50
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_beaker.png" width="50">
    beaker
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-alert.png" width="50">
    bell-alert
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-slash.png" width="50">
    bell-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-snooze.png" width="50">
    bell-snooze
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell.png" width="50">
    bell
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bold.png" width="50">
    bold
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bolt-slash.png" width="50">
    bolt-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bolt.png" width="50">
    bolt
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_book-open.png" width="50">
    book-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark-slash.png" width="50">
    bookmark-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark-square.png" width="50">
    bookmark-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark.png" width="50">
    bookmark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_briefcase.png" width="50">
    briefcase
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bug-ant.png" width="50">
    bug-ant
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-library.png" width="50">
    building-library
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-office-2.png" width="50">
    building-office-2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-office.png" width="50">
    building-office
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-storefront.png" width="50">
    building-storefront
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cake.png" width="50">
    cake
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calculator.png" width="50">
    calculator
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar-date-range.png" width="50">
    calendar-date-range
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar-days.png" width="50">
    calendar-days
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar.png" width="50">
    calendar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_camera.png" width="50">
    camera
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-bar-square.png" width="50">
    chart-bar-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-bar.png" width="50">
    chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-pie.png" width="50">
    chart-pie
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-bottom-center-text.png" width="50">
    chat-bubble-bottom-center-text
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-bottom-center.png" width="50">
    chat-bubble-bottom-center
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left-ellipsis.png" width="50">
    chat-bubble-left-ellipsis
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left-right.png" width="50">
    chat-bubble-left-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left.png" width="50">
    chat-bubble-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-oval-left-ellipsis.png" width="50">
    chat-bubble-oval-left-ellipsis
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-oval-left.png" width="50">
    chat-bubble-oval-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check-badge.png" width="50">
    check-badge
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check-circle.png" width="50">
    check-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check.png" width="50">
    check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-down.png" width="50">
    chevron-double-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-left.png" width="50">
    chevron-double-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-right.png" width="50">
    chevron-double-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-up.png" width="50">
    chevron-double-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-down.png" width="50">
    chevron-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-left.png" width="50">
    chevron-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-right.png" width="50">
    chevron-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-up-down.png" width="50">
    chevron-up-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-up.png" width="50">
    chevron-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_circle-stack.png" width="50">
    circle-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document-check.png" width="50">
    clipboard-document-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document-list.png" width="50">
    clipboard-document-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document.png" width="50">
    clipboard-document
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard.png" width="50">
    clipboard
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clock.png" width="50">
    clock
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud-arrow-down.png" width="50">
    cloud-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud-arrow-up.png" width="50">
    cloud-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud.png" width="50">
    cloud
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_code-bracket-square.png" width="50">
    code-bracket-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_code-bracket.png" width="50">
    code-bracket
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog-6-tooth.png" width="50">
    cog-6-tooth
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog-8-tooth.png" width="50">
    cog-8-tooth
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog.png" width="50">
    cog
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_command-line.png" width="50">
    command-line
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_computer-desktop.png" width="50">
    computer-desktop
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cpu-chip.png" width="50">
    cpu-chip
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_credit-card.png" width="50">
    credit-card
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cube-transparent.png" width="50">
    cube-transparent
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cube.png" width="50">
    cube
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-bangladeshi.png" width="50">
    currency-bangladeshi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-dollar.png" width="50">
    currency-dollar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-euro.png" width="50">
    currency-euro
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-pound.png" width="50">
    currency-pound
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-rupee.png" width="50">
    currency-rupee
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-yen.png" width="50">
    currency-yen
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cursor-arrow-rays.png" width="50">
    cursor-arrow-rays
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cursor-arrow-ripple.png" width="50">
    cursor-arrow-ripple
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_device-phone-mobile.png" width="50">
    device-phone-mobile
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_device-tablet.png" width="50">
    device-tablet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_divide.png" width="50">
    divide
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-arrow-down.png" width="50">
    document-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-arrow-up.png" width="50">
    document-arrow-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-chart-bar.png" width="50">
    document-chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-check.png" width="50">
    document-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-bangladeshi.png" width="50">
    document-currency-bangladeshi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-dollar.png" width="50">
    document-currency-dollar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-euro.png" width="50">
    document-currency-euro
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-pound.png" width="50">
    document-currency-pound
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-rupee.png" width="50">
    document-currency-rupee
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-yen.png" width="50">
    document-currency-yen
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-duplicate.png" width="50">
    document-duplicate
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-magnifying-glass.png" width="50">
    document-magnifying-glass
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-minus.png" width="50">
    document-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-plus.png" width="50">
    document-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-text.png" width="50">
    document-text
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document.png" width="50">
    document
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-horizontal-circle.png" width="50">
    ellipsis-horizontal-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-horizontal.png" width="50">
    ellipsis-horizontal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-vertical.png" width="50">
    ellipsis-vertical
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_envelope-open.png" width="50">
    envelope-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_envelope.png" width="50">
    envelope
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_equals.png" width="50">
    equals
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_exclamation-circle.png" width="50">
    exclamation-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_exclamation-triangle.png" width="50">
    exclamation-triangle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye-dropper.png" width="50">
    eye-dropper
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye-slash.png" width="50">
    eye-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye.png" width="50">
    eye
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_face-frown.png" width="50">
    face-frown
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_face-smile.png" width="50">
    face-smile
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_film.png" width="50">
    film
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_finger-print.png" width="50">
    finger-print
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_fire.png" width="50">
    fire
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_flag.png" width="50">
    flag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-arrow-down.png" width="50">
    folder-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-minus.png" width="50">
    folder-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-open.png" width="50">
    folder-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-plus.png" width="50">
    folder-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder.png" width="50">
    folder
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_forward.png" width="50">
    forward
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_funnel.png" width="50">
    funnel
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gif.png" width="50">
    gif
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gift-top.png" width="50">
    gift-top
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gift.png" width="50">
    gift
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-alt.png" width="50">
    globe-alt
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-americas.png" width="50">
    globe-americas
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-asia-australia.png" width="50">
    globe-asia-australia
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-europe-africa.png" width="50">
    globe-europe-africa
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h1.png" width="50">
    h1
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h2.png" width="50">
    h2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h3.png" width="50">
    h3
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-raised.png" width="50">
    hand-raised
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-thumb-down.png" width="50">
    hand-thumb-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-thumb-up.png" width="50">
    hand-thumb-up
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hashtag.png" width="50">
    hashtag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_heart.png" width="50">
    heart
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_home-modern.png" width="50">
    home-modern
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_home.png" width="50">
    home
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_identification.png" width="50">
    identification
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox-arrow-down.png" width="50">
    inbox-arrow-down
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox-stack.png" width="50">
    inbox-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox.png" width="50">
    inbox
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_information-circle.png" width="50">
    information-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_italic.png" width="50">
    italic
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_key.png" width="50">
    key
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_language.png" width="50">
    language
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lifebuoy.png" width="50">
    lifebuoy
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_light-bulb.png" width="50">
    light-bulb
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_link-slash.png" width="50">
    link-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_link.png" width="50">
    link
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_list-bullet.png" width="50">
    list-bullet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lock-closed.png" width="50">
    lock-closed
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lock-open.png" width="50">
    lock-open
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-circle.png" width="50">
    magnifying-glass-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-minus.png" width="50">
    magnifying-glass-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-plus.png" width="50">
    magnifying-glass-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass.png" width="50">
    magnifying-glass
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_map-pin.png" width="50">
    map-pin
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_map.png" width="50">
    map
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_megaphone.png" width="50">
    megaphone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_microphone.png" width="50">
    microphone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_minus-circle.png" width="50">
    minus-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_minus.png" width="50">
    minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_moon.png" width="50">
    moon
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_musical-note.png" width="50">
    musical-note
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_newspaper.png" width="50">
    newspaper
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_no-symbol.png" width="50">
    no-symbol
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_numbered-list.png" width="50">
    numbered-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paint-brush.png" width="50">
    paint-brush
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paper-airplane.png" width="50">
    paper-airplane
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paper-clip.png" width="50">
    paper-clip
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pause-circle.png" width="50">
    pause-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pause.png" width="50">
    pause
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pencil-square.png" width="50">
    pencil-square
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pencil.png" width="50">
    pencil
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_percent-badge.png" width="50">
    percent-badge
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-arrow-down-left.png" width="50">
    phone-arrow-down-left
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-arrow-up-right.png" width="50">
    phone-arrow-up-right
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-x-mark.png" width="50">
    phone-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone.png" width="50">
    phone
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_photo.png" width="50">
    photo
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play-circle.png" width="50">
    play-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play-pause.png" width="50">
    play-pause
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play.png" width="50">
    play
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_plus-circle.png" width="50">
    plus-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_plus.png" width="50">
    plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_power.png" width="50">
    power
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_presentation-chart-bar.png" width="50">
    presentation-chart-bar
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_presentation-chart-line.png" width="50">
    presentation-chart-line
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_printer.png" width="50">
    printer
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_puzzle-piece.png" width="50">
    puzzle-piece
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_qr-code.png" width="50">
    qr-code
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_question-mark-circle.png" width="50">
    question-mark-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_queue-list.png" width="50">
    queue-list
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_radio.png" width="50">
    radio
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_receipt-percent.png" width="50">
    receipt-percent
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_receipt-refund.png" width="50">
    receipt-refund
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rectangle-group.png" width="50">
    rectangle-group
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rectangle-stack.png" width="50">
    rectangle-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rocket-launch.png" width="50">
    rocket-launch
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rss.png" width="50">
    rss
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_scale.png" width="50">
    scale
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_scissors.png" width="50">
    scissors
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_server-stack.png" width="50">
    server-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_server.png" width="50">
    server
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_share.png" width="50">
    share
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shield-check.png" width="50">
    shield-check
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shield-exclamation.png" width="50">
    shield-exclamation
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shopping-bag.png" width="50">
    shopping-bag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shopping-cart.png" width="50">
    shopping-cart
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_signal-slash.png" width="50">
    signal-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_signal.png" width="50">
    signal
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_slash.png" width="50">
    slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_sparkles.png" width="50">
    sparkles
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_speaker-wave.png" width="50">
    speaker-wave
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_speaker-x-mark.png" width="50">
    speaker-x-mark
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_square-2-stack.png" width="50">
    square-2-stack
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_square-3-stack-3d.png" width="50">
    square-3-stack-3d
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_squares-2x2.png" width="50">
    squares-2x2
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_squares-plus.png" width="50">
    squares-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_star.png" width="50">
    star
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_stop-circle.png" width="50">
    stop-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_stop.png" width="50">
    stop
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_strikethrough.png" width="50">
    strikethrough
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_sun.png" width="50">
    sun
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_swatch.png" width="50">
    swatch
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_table-cells.png" width="50">
    table-cells
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_tag.png" width="50">
    tag
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ticket.png" width="50">
    ticket
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_trash.png" width="50">
    trash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_trophy.png" width="50">
    trophy
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_truck.png" width="50">
    truck
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_tv.png" width="50">
    tv
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_underline.png" width="50">
    underline
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-circle.png" width="50">
    user-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-group.png" width="50">
    user-group
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-minus.png" width="50">
    user-minus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-plus.png" width="50">
    user-plus
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user.png" width="50">
    user
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_users.png" width="50">
    users
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_variable.png" width="50">
    variable
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_video-camera-slash.png" width="50">
    video-camera-slash
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_video-camera.png" width="50">
    video-camera
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_view-columns.png" width="50">
    view-columns
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_viewfinder-circle.png" width="50">
    viewfinder-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wallet.png" width="50">
    wallet
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wifi.png" width="50">
    wifi
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_window.png" width="50">
    window
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wrench-screwdriver.png" width="50">
    wrench-screwdriver
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wrench.png" width="50">
    wrench
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_x-circle.png" width="50">
    x-circle
</div>

<div style="flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; ">
    <img src="https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_x-mark.png" width="50">
    x-mark
</div>
</div>

<!-- INSERT_ICONS_END -->


## Development

### Tests

To run tests, use:

```bash
tox
```

### Updating icons

To download the icons from HeroIcons.com, run:

```bash
python scripts/download_icons.py
```

This will save them to `src/djc_heroicons/icons.py`.

Next, to update the list of icons in the README, run:

```bash
python scripts/gen_icon_docs.py
```

            

Raw data

            {
    "_id": null,
    "home_page": null,
    "name": "djc-heroicons",
    "maintainer": null,
    "docs_url": null,
    "requires_python": "<4.0,>=3.8",
    "maintainer_email": null,
    "keywords": "django, components, heroicons, icon, component, html",
    "author": null,
    "author_email": "Juro Oravec <juraj.oravec.josefson@gmail.com>",
    "download_url": "https://files.pythonhosted.org/packages/87/e4/e5476246066e1fc71962e2122b6692d3b6386be04257d8df5f0a2661539c/djc_heroicons-1.0.1.tar.gz",
    "platform": null,
    "description": "# djc-heroicons\n\n[![PyPI - Version](https://img.shields.io/pypi/v/djc-heroicons)](https://pypi.org/project/djc-heroicons/) [![PyPI - Python Version](https://img.shields.io/pypi/pyversions/djc-heroicons)](https://pypi.org/project/djc-heroicons/) [![PyPI - License](https://img.shields.io/pypi/l/djc-heroicons)](https://github.com/JuroOravec/djc-heroicons/blob/main/LICENSE) [![PyPI - Downloads](https://img.shields.io/pypi/dm/djc-heroicons)](https://pypistats.org/packages/djc-heroicons) [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/JuroOravec/djc-heroicons/tests.yml)](https://github.com/JuroOravec/djc-heroicons/actions/workflows/tests.yml)\n\n_[HeroIcons.com](https://heroicons.com) icons for [django-components](https://pypi.org/project/django-components/)._\n\n```bash\npip install djc-heroicons\n```\n\n## Overview\n\ndjc-heroicons adds an `Icon` component that renders an `<svg>` element with the icons from [HeroIcons.com](https://heroicons.com). This icon is accessible in Django templates as `{% component \"icon\" %}`.\n\nUse the `name` kwarg to specify the icon name:\n\n```django\n<div>\n  Items:\n  <ul>\n    <li>\n      {% component \"icon\" name=\"academic-cap\" / %}\n    </li>\n  </ul>\n</div>\n```\n\nBy default the component renders the `\"outline\"` variant. To render the `\"solid\"` variant of the icon, set kwarg `variant` to `\"solid\"`:\n\n```django\n{% component \"icon\" name=\"academic-cap\" variant=\"solid\" / %}\n```\n\nCommon changes like color, size, or stroke width can all be set directly on the component:\n\n```django\n{% component \"icon\"\n   name=\"academic-cap\"\n   size=48\n   color=\"red\"\n   stroke_width=1.2\n/ %}\n```\n\nIf you need to pass attributes to the `<svg>` element, you can use the `attrs` kwarg, which accepts a dictionary:\n\n```django\n{% component \"icon\"\n   name=\"academic-cap\"\n   attrs:id=\"my-svg\"\n   attrs:class=\"p-4 mb-3\"\n   attrs:data-id=\"test-123\"\n/ %}\n```\n\nSee all available input for `Icon` component in [API reference](#api-reference).\n\n## Usage in Python\n\nAll of the above is possible also from within Python, by importing `Icon`:\n\n```py\nfrom djc_heroicons import Icon\n\ncontent = Icon.render(\n    kwargs={\n        \"name\": \"academic-cap\",\n        \"variant\": \"solid\",\n        \"size\": 48,\n        \"attrs\": {\n            \"id\": \"my-svg\",\n            \"class\": \"p-4 mb-3\",\n        },\n    },\n)\n```\n\n## Installation\n\n1. Install the package:\n\n   ```bash\n   pip install djc-heroicons\n   ```\n\n2. Add the package to `INSTALLED_APPS` of your Django project:\n\n   ```py\n   INSTALLED_APPS = [\n       ...\n       \"django_components\",\n       \"djc_heroicons\",\n       ...\n   ]\n   ```\n\n## Settings\n\nYou can configure the behavior of the djc-heroicons library\nby setting a `DJC_HEROICONS` variable in your Django settings file.\n\n`DJC_HEROICONS` can be either a plain dictionary, or a instance of `HeroIconSettings`. The latter helps with intellisense and type hints:\n\n```py\nDJC_HEROICONS = {\n   \"registry\": custom_registry,\n}\n\n# or\n\nfrom djc_heroicons import HeroIconsSettings\n\nDJC_HEROICONS = HeroIconsSettings(\n   registry=custom_registry,\n)\n```\n\n### `registry`\n\n`ComponentRegistry | str | None = None`\n\nThe django-components' [`ComponentRegistry`](https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/) to which the icon component should be registered.\n\nIf `None`, the icon is registered into the default registry.\n\n```python\ncustom_registry = ComponentRegistry()\n\nDJC_HEROICONS = HeroIconsSettings(\n   registry=custom_registry,\n)\n```\n\n### `component_name`\n\n`str | None = \"icon\"`\n\nThe name under which the Icon component will be available from within Django templates.\n\nIf `None`, the component is registered with the name `\"icon\"`.\n\n```html\n{% component \"icon\" name=\"academic-cap\" / %}\n```\n\n**Example:**\n\nIf you set this to `\"heroicons\"`:\n\n```python\nDJC_HEROICONS = HeroIconsSettings(\n   component_name=\"heroicons\",\n)\n```\n\nYou will use the component like this:\n\n```html\n{% component \"heroicons\" name=\"academic-cap\" / %}\n```\n\n## API reference\n\n### `Icon` / `{% component \"icon\" %}`\n\nThe Icon component accepts following kwargs:\n\n#### `name`\n\n`str` - required\n\nThe icon name from [HeroIcons.com](https://heroicons.com), e.g. `arrow-left-circle`.\n\n#### `variant`\n\n`\"outline\" | \"solid\" = \"outline\"`\n\nThe icon variant - `\"outline\"` or `\"solid\"`. Defaults to `\"outline\"`.\n\n#### `size`\n\n`int = 24`\n\nThe icon size in pixels. Defaults to `24`.\n\n#### `color`\n\n`str = \"currentColor\"`\n\nThe icon color. Defaults to `\"currentColor\"`.\n\n- If the icon is `\"outline\"`, this sets the stroke color.\n- If the icon is `\"solid\"`, this sets the fill color.\n\n#### `stroke_width`\n\n`float = 1.5`\n\nThe icon [stroke width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width). Applies only to the `\"outline\"` variant. Defaults to `1.5`.\n\n#### `viewbox`\n\n`str = \"0 0 24 24\"`\n\nThe icon SVG's [viewbox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewbox). Defaults to `\"0 0 24 24\"`.\n\n#### `attrs`\n\n`Dict | None = None`\n\nOptional dictionary to pass HTML attributes to the icon's SVG element.\n\n### `HeroIconsSettings`\n\nNamedTuple for adding intellisense and type hinting to the settings. See [Settings](#settings).\n\n### `IconName`\n\nType alias that holds all the valid icon names, e.g.\n\n`Literal[\"arrow-left-circle\", \"arrow-down\", ...]`\n\nUse this for type validation and intellisense.\n\n**Example:**\n\nIn the example below, the `\"icon\"` key of `menu` is typed, so Mypy or other linters pick it up as an error:\n\n```py\nfrom typing import List, TypedDict\n\nfrom djc_heroicons import IconName\n\nclass MenuItem(TypedDict):\n    name: str\n    icon: IconName\n\nmenu: List[MenuItem]: = [\n   {\"name\": \"Home\", \"icon\": \"home\"},\n   {\"name\": \"Settings\", \"icon\": \"cog-6-tooth\"},\n   {\"name\": \"Account\", \"icon\": \"user-circe\"},  <-- Typo!\n]\n```\n\n## Release notes\n\nRead the [Release Notes](https://github.com/JuroOravec/djc-heroicons/tree/main/CHANGELOG.md)\nto see the latest features and fixes.\n\n<!-- INSERT_ICONS_START -->\n## Icons\n\n\n\n---\n\n### Outline\n\n<div style=\"display: flex; flex-wrap: wrap; font-family: monospace; \">\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_academic-cap.png\" width=\"50\">\n    academic-cap\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_adjustments-horizontal.png\" width=\"50\">\n    adjustments-horizontal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_adjustments-vertical.png\" width=\"50\">\n    adjustments-vertical\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box-arrow-down.png\" width=\"50\">\n    archive-box-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box-x-mark.png\" width=\"50\">\n    archive-box-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_archive-box.png\" width=\"50\">\n    archive-box\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-circle.png\" width=\"50\">\n    arrow-down-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-left.png\" width=\"50\">\n    arrow-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-on-square-stack.png\" width=\"50\">\n    arrow-down-on-square-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-on-square.png\" width=\"50\">\n    arrow-down-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-right.png\" width=\"50\">\n    arrow-down-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down-tray.png\" width=\"50\">\n    arrow-down-tray\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-down.png\" width=\"50\">\n    arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-circle.png\" width=\"50\">\n    arrow-left-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-end-on-rectangle.png\" width=\"50\">\n    arrow-left-end-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left-start-on-rectangle.png\" width=\"50\">\n    arrow-left-start-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-left.png\" width=\"50\">\n    arrow-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-down.png\" width=\"50\">\n    arrow-long-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-left.png\" width=\"50\">\n    arrow-long-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-right.png\" width=\"50\">\n    arrow-long-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-long-up.png\" width=\"50\">\n    arrow-long-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-path-rounded-square.png\" width=\"50\">\n    arrow-path-rounded-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-path.png\" width=\"50\">\n    arrow-path\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-circle.png\" width=\"50\">\n    arrow-right-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-end-on-rectangle.png\" width=\"50\">\n    arrow-right-end-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right-start-on-rectangle.png\" width=\"50\">\n    arrow-right-start-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-right.png\" width=\"50\">\n    arrow-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-top-right-on-square.png\" width=\"50\">\n    arrow-top-right-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-trending-down.png\" width=\"50\">\n    arrow-trending-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-trending-up.png\" width=\"50\">\n    arrow-trending-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-down-left.png\" width=\"50\">\n    arrow-turn-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-down-right.png\" width=\"50\">\n    arrow-turn-down-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-left-down.png\" width=\"50\">\n    arrow-turn-left-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-left-up.png\" width=\"50\">\n    arrow-turn-left-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-right-down.png\" width=\"50\">\n    arrow-turn-right-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-right-up.png\" width=\"50\">\n    arrow-turn-right-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-up-left.png\" width=\"50\">\n    arrow-turn-up-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-turn-up-right.png\" width=\"50\">\n    arrow-turn-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-circle.png\" width=\"50\">\n    arrow-up-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-left.png\" width=\"50\">\n    arrow-up-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-on-square-stack.png\" width=\"50\">\n    arrow-up-on-square-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-on-square.png\" width=\"50\">\n    arrow-up-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-right.png\" width=\"50\">\n    arrow-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up-tray.png\" width=\"50\">\n    arrow-up-tray\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-up.png\" width=\"50\">\n    arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-down.png\" width=\"50\">\n    arrow-uturn-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-left.png\" width=\"50\">\n    arrow-uturn-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-right.png\" width=\"50\">\n    arrow-uturn-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrow-uturn-up.png\" width=\"50\">\n    arrow-uturn-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-pointing-in.png\" width=\"50\">\n    arrows-pointing-in\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-pointing-out.png\" width=\"50\">\n    arrows-pointing-out\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-right-left.png\" width=\"50\">\n    arrows-right-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_arrows-up-down.png\" width=\"50\">\n    arrows-up-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_at-symbol.png\" width=\"50\">\n    at-symbol\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_backspace.png\" width=\"50\">\n    backspace\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_backward.png\" width=\"50\">\n    backward\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_banknotes.png\" width=\"50\">\n    banknotes\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-2.png\" width=\"50\">\n    bars-2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-bottom-left.png\" width=\"50\">\n    bars-3-bottom-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-bottom-right.png\" width=\"50\">\n    bars-3-bottom-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3-center-left.png\" width=\"50\">\n    bars-3-center-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-3.png\" width=\"50\">\n    bars-3\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-4.png\" width=\"50\">\n    bars-4\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-arrow-down.png\" width=\"50\">\n    bars-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bars-arrow-up.png\" width=\"50\">\n    bars-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-0.png\" width=\"50\">\n    battery-0\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-100.png\" width=\"50\">\n    battery-100\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_battery-50.png\" width=\"50\">\n    battery-50\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_beaker.png\" width=\"50\">\n    beaker\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-alert.png\" width=\"50\">\n    bell-alert\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-slash.png\" width=\"50\">\n    bell-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell-snooze.png\" width=\"50\">\n    bell-snooze\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bell.png\" width=\"50\">\n    bell\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bold.png\" width=\"50\">\n    bold\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bolt-slash.png\" width=\"50\">\n    bolt-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bolt.png\" width=\"50\">\n    bolt\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_book-open.png\" width=\"50\">\n    book-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark-slash.png\" width=\"50\">\n    bookmark-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark-square.png\" width=\"50\">\n    bookmark-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bookmark.png\" width=\"50\">\n    bookmark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_briefcase.png\" width=\"50\">\n    briefcase\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_bug-ant.png\" width=\"50\">\n    bug-ant\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-library.png\" width=\"50\">\n    building-library\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-office-2.png\" width=\"50\">\n    building-office-2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-office.png\" width=\"50\">\n    building-office\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_building-storefront.png\" width=\"50\">\n    building-storefront\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cake.png\" width=\"50\">\n    cake\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calculator.png\" width=\"50\">\n    calculator\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar-date-range.png\" width=\"50\">\n    calendar-date-range\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar-days.png\" width=\"50\">\n    calendar-days\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_calendar.png\" width=\"50\">\n    calendar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_camera.png\" width=\"50\">\n    camera\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-bar-square.png\" width=\"50\">\n    chart-bar-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-bar.png\" width=\"50\">\n    chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chart-pie.png\" width=\"50\">\n    chart-pie\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-bottom-center-text.png\" width=\"50\">\n    chat-bubble-bottom-center-text\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-bottom-center.png\" width=\"50\">\n    chat-bubble-bottom-center\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left-ellipsis.png\" width=\"50\">\n    chat-bubble-left-ellipsis\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left-right.png\" width=\"50\">\n    chat-bubble-left-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-left.png\" width=\"50\">\n    chat-bubble-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-oval-left-ellipsis.png\" width=\"50\">\n    chat-bubble-oval-left-ellipsis\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chat-bubble-oval-left.png\" width=\"50\">\n    chat-bubble-oval-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check-badge.png\" width=\"50\">\n    check-badge\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check-circle.png\" width=\"50\">\n    check-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_check.png\" width=\"50\">\n    check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-down.png\" width=\"50\">\n    chevron-double-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-left.png\" width=\"50\">\n    chevron-double-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-right.png\" width=\"50\">\n    chevron-double-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-double-up.png\" width=\"50\">\n    chevron-double-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-down.png\" width=\"50\">\n    chevron-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-left.png\" width=\"50\">\n    chevron-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-right.png\" width=\"50\">\n    chevron-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-up-down.png\" width=\"50\">\n    chevron-up-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_chevron-up.png\" width=\"50\">\n    chevron-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_circle-stack.png\" width=\"50\">\n    circle-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document-check.png\" width=\"50\">\n    clipboard-document-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document-list.png\" width=\"50\">\n    clipboard-document-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard-document.png\" width=\"50\">\n    clipboard-document\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clipboard.png\" width=\"50\">\n    clipboard\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_clock.png\" width=\"50\">\n    clock\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud-arrow-down.png\" width=\"50\">\n    cloud-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud-arrow-up.png\" width=\"50\">\n    cloud-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cloud.png\" width=\"50\">\n    cloud\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_code-bracket-square.png\" width=\"50\">\n    code-bracket-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_code-bracket.png\" width=\"50\">\n    code-bracket\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog-6-tooth.png\" width=\"50\">\n    cog-6-tooth\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog-8-tooth.png\" width=\"50\">\n    cog-8-tooth\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cog.png\" width=\"50\">\n    cog\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_command-line.png\" width=\"50\">\n    command-line\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_computer-desktop.png\" width=\"50\">\n    computer-desktop\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cpu-chip.png\" width=\"50\">\n    cpu-chip\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_credit-card.png\" width=\"50\">\n    credit-card\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cube-transparent.png\" width=\"50\">\n    cube-transparent\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cube.png\" width=\"50\">\n    cube\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-bangladeshi.png\" width=\"50\">\n    currency-bangladeshi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-dollar.png\" width=\"50\">\n    currency-dollar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-euro.png\" width=\"50\">\n    currency-euro\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-pound.png\" width=\"50\">\n    currency-pound\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-rupee.png\" width=\"50\">\n    currency-rupee\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_currency-yen.png\" width=\"50\">\n    currency-yen\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cursor-arrow-rays.png\" width=\"50\">\n    cursor-arrow-rays\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_cursor-arrow-ripple.png\" width=\"50\">\n    cursor-arrow-ripple\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_device-phone-mobile.png\" width=\"50\">\n    device-phone-mobile\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_device-tablet.png\" width=\"50\">\n    device-tablet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_divide.png\" width=\"50\">\n    divide\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-arrow-down.png\" width=\"50\">\n    document-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-arrow-up.png\" width=\"50\">\n    document-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-chart-bar.png\" width=\"50\">\n    document-chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-check.png\" width=\"50\">\n    document-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-bangladeshi.png\" width=\"50\">\n    document-currency-bangladeshi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-dollar.png\" width=\"50\">\n    document-currency-dollar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-euro.png\" width=\"50\">\n    document-currency-euro\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-pound.png\" width=\"50\">\n    document-currency-pound\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-rupee.png\" width=\"50\">\n    document-currency-rupee\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-currency-yen.png\" width=\"50\">\n    document-currency-yen\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-duplicate.png\" width=\"50\">\n    document-duplicate\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-magnifying-glass.png\" width=\"50\">\n    document-magnifying-glass\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-minus.png\" width=\"50\">\n    document-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-plus.png\" width=\"50\">\n    document-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document-text.png\" width=\"50\">\n    document-text\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_document.png\" width=\"50\">\n    document\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-horizontal-circle.png\" width=\"50\">\n    ellipsis-horizontal-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-horizontal.png\" width=\"50\">\n    ellipsis-horizontal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ellipsis-vertical.png\" width=\"50\">\n    ellipsis-vertical\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_envelope-open.png\" width=\"50\">\n    envelope-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_envelope.png\" width=\"50\">\n    envelope\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_equals.png\" width=\"50\">\n    equals\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_exclamation-circle.png\" width=\"50\">\n    exclamation-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_exclamation-triangle.png\" width=\"50\">\n    exclamation-triangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye-dropper.png\" width=\"50\">\n    eye-dropper\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye-slash.png\" width=\"50\">\n    eye-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_eye.png\" width=\"50\">\n    eye\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_face-frown.png\" width=\"50\">\n    face-frown\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_face-smile.png\" width=\"50\">\n    face-smile\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_film.png\" width=\"50\">\n    film\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_finger-print.png\" width=\"50\">\n    finger-print\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_fire.png\" width=\"50\">\n    fire\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_flag.png\" width=\"50\">\n    flag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-arrow-down.png\" width=\"50\">\n    folder-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-minus.png\" width=\"50\">\n    folder-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-open.png\" width=\"50\">\n    folder-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder-plus.png\" width=\"50\">\n    folder-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_folder.png\" width=\"50\">\n    folder\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_forward.png\" width=\"50\">\n    forward\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_funnel.png\" width=\"50\">\n    funnel\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gif.png\" width=\"50\">\n    gif\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gift-top.png\" width=\"50\">\n    gift-top\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_gift.png\" width=\"50\">\n    gift\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-alt.png\" width=\"50\">\n    globe-alt\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-americas.png\" width=\"50\">\n    globe-americas\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-asia-australia.png\" width=\"50\">\n    globe-asia-australia\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_globe-europe-africa.png\" width=\"50\">\n    globe-europe-africa\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h1.png\" width=\"50\">\n    h1\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h2.png\" width=\"50\">\n    h2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_h3.png\" width=\"50\">\n    h3\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-raised.png\" width=\"50\">\n    hand-raised\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-thumb-down.png\" width=\"50\">\n    hand-thumb-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hand-thumb-up.png\" width=\"50\">\n    hand-thumb-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_hashtag.png\" width=\"50\">\n    hashtag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_heart.png\" width=\"50\">\n    heart\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_home-modern.png\" width=\"50\">\n    home-modern\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_home.png\" width=\"50\">\n    home\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_identification.png\" width=\"50\">\n    identification\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox-arrow-down.png\" width=\"50\">\n    inbox-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox-stack.png\" width=\"50\">\n    inbox-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_inbox.png\" width=\"50\">\n    inbox\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_information-circle.png\" width=\"50\">\n    information-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_italic.png\" width=\"50\">\n    italic\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_key.png\" width=\"50\">\n    key\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_language.png\" width=\"50\">\n    language\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lifebuoy.png\" width=\"50\">\n    lifebuoy\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_light-bulb.png\" width=\"50\">\n    light-bulb\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_link-slash.png\" width=\"50\">\n    link-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_link.png\" width=\"50\">\n    link\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_list-bullet.png\" width=\"50\">\n    list-bullet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lock-closed.png\" width=\"50\">\n    lock-closed\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_lock-open.png\" width=\"50\">\n    lock-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-circle.png\" width=\"50\">\n    magnifying-glass-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-minus.png\" width=\"50\">\n    magnifying-glass-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass-plus.png\" width=\"50\">\n    magnifying-glass-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_magnifying-glass.png\" width=\"50\">\n    magnifying-glass\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_map-pin.png\" width=\"50\">\n    map-pin\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_map.png\" width=\"50\">\n    map\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_megaphone.png\" width=\"50\">\n    megaphone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_microphone.png\" width=\"50\">\n    microphone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_minus-circle.png\" width=\"50\">\n    minus-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_minus.png\" width=\"50\">\n    minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_moon.png\" width=\"50\">\n    moon\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_musical-note.png\" width=\"50\">\n    musical-note\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_newspaper.png\" width=\"50\">\n    newspaper\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_no-symbol.png\" width=\"50\">\n    no-symbol\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_numbered-list.png\" width=\"50\">\n    numbered-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paint-brush.png\" width=\"50\">\n    paint-brush\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paper-airplane.png\" width=\"50\">\n    paper-airplane\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_paper-clip.png\" width=\"50\">\n    paper-clip\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pause-circle.png\" width=\"50\">\n    pause-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pause.png\" width=\"50\">\n    pause\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pencil-square.png\" width=\"50\">\n    pencil-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_pencil.png\" width=\"50\">\n    pencil\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_percent-badge.png\" width=\"50\">\n    percent-badge\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-arrow-down-left.png\" width=\"50\">\n    phone-arrow-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-arrow-up-right.png\" width=\"50\">\n    phone-arrow-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone-x-mark.png\" width=\"50\">\n    phone-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_phone.png\" width=\"50\">\n    phone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_photo.png\" width=\"50\">\n    photo\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play-circle.png\" width=\"50\">\n    play-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play-pause.png\" width=\"50\">\n    play-pause\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_play.png\" width=\"50\">\n    play\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_plus-circle.png\" width=\"50\">\n    plus-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_plus.png\" width=\"50\">\n    plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_power.png\" width=\"50\">\n    power\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_presentation-chart-bar.png\" width=\"50\">\n    presentation-chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_presentation-chart-line.png\" width=\"50\">\n    presentation-chart-line\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_printer.png\" width=\"50\">\n    printer\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_puzzle-piece.png\" width=\"50\">\n    puzzle-piece\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_qr-code.png\" width=\"50\">\n    qr-code\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_question-mark-circle.png\" width=\"50\">\n    question-mark-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_queue-list.png\" width=\"50\">\n    queue-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_radio.png\" width=\"50\">\n    radio\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_receipt-percent.png\" width=\"50\">\n    receipt-percent\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_receipt-refund.png\" width=\"50\">\n    receipt-refund\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rectangle-group.png\" width=\"50\">\n    rectangle-group\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rectangle-stack.png\" width=\"50\">\n    rectangle-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rocket-launch.png\" width=\"50\">\n    rocket-launch\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_rss.png\" width=\"50\">\n    rss\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_scale.png\" width=\"50\">\n    scale\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_scissors.png\" width=\"50\">\n    scissors\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_server-stack.png\" width=\"50\">\n    server-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_server.png\" width=\"50\">\n    server\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_share.png\" width=\"50\">\n    share\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shield-check.png\" width=\"50\">\n    shield-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shield-exclamation.png\" width=\"50\">\n    shield-exclamation\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shopping-bag.png\" width=\"50\">\n    shopping-bag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_shopping-cart.png\" width=\"50\">\n    shopping-cart\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_signal-slash.png\" width=\"50\">\n    signal-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_signal.png\" width=\"50\">\n    signal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_slash.png\" width=\"50\">\n    slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_sparkles.png\" width=\"50\">\n    sparkles\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_speaker-wave.png\" width=\"50\">\n    speaker-wave\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_speaker-x-mark.png\" width=\"50\">\n    speaker-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_square-2-stack.png\" width=\"50\">\n    square-2-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_square-3-stack-3d.png\" width=\"50\">\n    square-3-stack-3d\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_squares-2x2.png\" width=\"50\">\n    squares-2x2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_squares-plus.png\" width=\"50\">\n    squares-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_star.png\" width=\"50\">\n    star\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_stop-circle.png\" width=\"50\">\n    stop-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_stop.png\" width=\"50\">\n    stop\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_strikethrough.png\" width=\"50\">\n    strikethrough\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_sun.png\" width=\"50\">\n    sun\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_swatch.png\" width=\"50\">\n    swatch\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_table-cells.png\" width=\"50\">\n    table-cells\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_tag.png\" width=\"50\">\n    tag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_ticket.png\" width=\"50\">\n    ticket\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_trash.png\" width=\"50\">\n    trash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_trophy.png\" width=\"50\">\n    trophy\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_truck.png\" width=\"50\">\n    truck\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_tv.png\" width=\"50\">\n    tv\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_underline.png\" width=\"50\">\n    underline\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-circle.png\" width=\"50\">\n    user-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-group.png\" width=\"50\">\n    user-group\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-minus.png\" width=\"50\">\n    user-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user-plus.png\" width=\"50\">\n    user-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_user.png\" width=\"50\">\n    user\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_users.png\" width=\"50\">\n    users\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_variable.png\" width=\"50\">\n    variable\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_video-camera-slash.png\" width=\"50\">\n    video-camera-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_video-camera.png\" width=\"50\">\n    video-camera\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_view-columns.png\" width=\"50\">\n    view-columns\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_viewfinder-circle.png\" width=\"50\">\n    viewfinder-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wallet.png\" width=\"50\">\n    wallet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wifi.png\" width=\"50\">\n    wifi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_window.png\" width=\"50\">\n    window\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wrench-screwdriver.png\" width=\"50\">\n    wrench-screwdriver\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_wrench.png\" width=\"50\">\n    wrench\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_x-circle.png\" width=\"50\">\n    x-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/outline_x-mark.png\" width=\"50\">\n    x-mark\n</div>\n</div>\n\n\n---\n\n### Solid\n\n<div style=\"display: flex; flex-wrap: wrap; font-family: monospace; \">\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_academic-cap.png\" width=\"50\">\n    academic-cap\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_adjustments-horizontal.png\" width=\"50\">\n    adjustments-horizontal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_adjustments-vertical.png\" width=\"50\">\n    adjustments-vertical\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box-arrow-down.png\" width=\"50\">\n    archive-box-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box-x-mark.png\" width=\"50\">\n    archive-box-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_archive-box.png\" width=\"50\">\n    archive-box\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-circle.png\" width=\"50\">\n    arrow-down-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-left.png\" width=\"50\">\n    arrow-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-on-square-stack.png\" width=\"50\">\n    arrow-down-on-square-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-on-square.png\" width=\"50\">\n    arrow-down-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-right.png\" width=\"50\">\n    arrow-down-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down-tray.png\" width=\"50\">\n    arrow-down-tray\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-down.png\" width=\"50\">\n    arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-circle.png\" width=\"50\">\n    arrow-left-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-end-on-rectangle.png\" width=\"50\">\n    arrow-left-end-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left-start-on-rectangle.png\" width=\"50\">\n    arrow-left-start-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-left.png\" width=\"50\">\n    arrow-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-down.png\" width=\"50\">\n    arrow-long-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-left.png\" width=\"50\">\n    arrow-long-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-right.png\" width=\"50\">\n    arrow-long-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-long-up.png\" width=\"50\">\n    arrow-long-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-path-rounded-square.png\" width=\"50\">\n    arrow-path-rounded-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-path.png\" width=\"50\">\n    arrow-path\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-circle.png\" width=\"50\">\n    arrow-right-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-end-on-rectangle.png\" width=\"50\">\n    arrow-right-end-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right-start-on-rectangle.png\" width=\"50\">\n    arrow-right-start-on-rectangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-right.png\" width=\"50\">\n    arrow-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-top-right-on-square.png\" width=\"50\">\n    arrow-top-right-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-trending-down.png\" width=\"50\">\n    arrow-trending-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-trending-up.png\" width=\"50\">\n    arrow-trending-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-down-left.png\" width=\"50\">\n    arrow-turn-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-down-right.png\" width=\"50\">\n    arrow-turn-down-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-left-down.png\" width=\"50\">\n    arrow-turn-left-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-left-up.png\" width=\"50\">\n    arrow-turn-left-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-right-down.png\" width=\"50\">\n    arrow-turn-right-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-right-up.png\" width=\"50\">\n    arrow-turn-right-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-up-left.png\" width=\"50\">\n    arrow-turn-up-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-turn-up-right.png\" width=\"50\">\n    arrow-turn-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-circle.png\" width=\"50\">\n    arrow-up-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-left.png\" width=\"50\">\n    arrow-up-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-on-square-stack.png\" width=\"50\">\n    arrow-up-on-square-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-on-square.png\" width=\"50\">\n    arrow-up-on-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-right.png\" width=\"50\">\n    arrow-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up-tray.png\" width=\"50\">\n    arrow-up-tray\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-up.png\" width=\"50\">\n    arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-down.png\" width=\"50\">\n    arrow-uturn-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-left.png\" width=\"50\">\n    arrow-uturn-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-right.png\" width=\"50\">\n    arrow-uturn-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrow-uturn-up.png\" width=\"50\">\n    arrow-uturn-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-pointing-in.png\" width=\"50\">\n    arrows-pointing-in\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-pointing-out.png\" width=\"50\">\n    arrows-pointing-out\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-right-left.png\" width=\"50\">\n    arrows-right-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_arrows-up-down.png\" width=\"50\">\n    arrows-up-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_at-symbol.png\" width=\"50\">\n    at-symbol\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_backspace.png\" width=\"50\">\n    backspace\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_backward.png\" width=\"50\">\n    backward\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_banknotes.png\" width=\"50\">\n    banknotes\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-2.png\" width=\"50\">\n    bars-2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-bottom-left.png\" width=\"50\">\n    bars-3-bottom-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-bottom-right.png\" width=\"50\">\n    bars-3-bottom-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3-center-left.png\" width=\"50\">\n    bars-3-center-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-3.png\" width=\"50\">\n    bars-3\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-4.png\" width=\"50\">\n    bars-4\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-arrow-down.png\" width=\"50\">\n    bars-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bars-arrow-up.png\" width=\"50\">\n    bars-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-0.png\" width=\"50\">\n    battery-0\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-100.png\" width=\"50\">\n    battery-100\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_battery-50.png\" width=\"50\">\n    battery-50\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_beaker.png\" width=\"50\">\n    beaker\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-alert.png\" width=\"50\">\n    bell-alert\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-slash.png\" width=\"50\">\n    bell-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell-snooze.png\" width=\"50\">\n    bell-snooze\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bell.png\" width=\"50\">\n    bell\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bold.png\" width=\"50\">\n    bold\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bolt-slash.png\" width=\"50\">\n    bolt-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bolt.png\" width=\"50\">\n    bolt\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_book-open.png\" width=\"50\">\n    book-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark-slash.png\" width=\"50\">\n    bookmark-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark-square.png\" width=\"50\">\n    bookmark-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bookmark.png\" width=\"50\">\n    bookmark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_briefcase.png\" width=\"50\">\n    briefcase\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_bug-ant.png\" width=\"50\">\n    bug-ant\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-library.png\" width=\"50\">\n    building-library\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-office-2.png\" width=\"50\">\n    building-office-2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-office.png\" width=\"50\">\n    building-office\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_building-storefront.png\" width=\"50\">\n    building-storefront\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cake.png\" width=\"50\">\n    cake\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calculator.png\" width=\"50\">\n    calculator\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar-date-range.png\" width=\"50\">\n    calendar-date-range\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar-days.png\" width=\"50\">\n    calendar-days\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_calendar.png\" width=\"50\">\n    calendar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_camera.png\" width=\"50\">\n    camera\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-bar-square.png\" width=\"50\">\n    chart-bar-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-bar.png\" width=\"50\">\n    chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chart-pie.png\" width=\"50\">\n    chart-pie\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-bottom-center-text.png\" width=\"50\">\n    chat-bubble-bottom-center-text\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-bottom-center.png\" width=\"50\">\n    chat-bubble-bottom-center\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left-ellipsis.png\" width=\"50\">\n    chat-bubble-left-ellipsis\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left-right.png\" width=\"50\">\n    chat-bubble-left-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-left.png\" width=\"50\">\n    chat-bubble-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-oval-left-ellipsis.png\" width=\"50\">\n    chat-bubble-oval-left-ellipsis\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chat-bubble-oval-left.png\" width=\"50\">\n    chat-bubble-oval-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check-badge.png\" width=\"50\">\n    check-badge\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check-circle.png\" width=\"50\">\n    check-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_check.png\" width=\"50\">\n    check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-down.png\" width=\"50\">\n    chevron-double-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-left.png\" width=\"50\">\n    chevron-double-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-right.png\" width=\"50\">\n    chevron-double-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-double-up.png\" width=\"50\">\n    chevron-double-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-down.png\" width=\"50\">\n    chevron-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-left.png\" width=\"50\">\n    chevron-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-right.png\" width=\"50\">\n    chevron-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-up-down.png\" width=\"50\">\n    chevron-up-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_chevron-up.png\" width=\"50\">\n    chevron-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_circle-stack.png\" width=\"50\">\n    circle-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document-check.png\" width=\"50\">\n    clipboard-document-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document-list.png\" width=\"50\">\n    clipboard-document-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard-document.png\" width=\"50\">\n    clipboard-document\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clipboard.png\" width=\"50\">\n    clipboard\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_clock.png\" width=\"50\">\n    clock\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud-arrow-down.png\" width=\"50\">\n    cloud-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud-arrow-up.png\" width=\"50\">\n    cloud-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cloud.png\" width=\"50\">\n    cloud\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_code-bracket-square.png\" width=\"50\">\n    code-bracket-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_code-bracket.png\" width=\"50\">\n    code-bracket\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog-6-tooth.png\" width=\"50\">\n    cog-6-tooth\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog-8-tooth.png\" width=\"50\">\n    cog-8-tooth\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cog.png\" width=\"50\">\n    cog\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_command-line.png\" width=\"50\">\n    command-line\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_computer-desktop.png\" width=\"50\">\n    computer-desktop\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cpu-chip.png\" width=\"50\">\n    cpu-chip\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_credit-card.png\" width=\"50\">\n    credit-card\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cube-transparent.png\" width=\"50\">\n    cube-transparent\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cube.png\" width=\"50\">\n    cube\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-bangladeshi.png\" width=\"50\">\n    currency-bangladeshi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-dollar.png\" width=\"50\">\n    currency-dollar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-euro.png\" width=\"50\">\n    currency-euro\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-pound.png\" width=\"50\">\n    currency-pound\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-rupee.png\" width=\"50\">\n    currency-rupee\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_currency-yen.png\" width=\"50\">\n    currency-yen\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cursor-arrow-rays.png\" width=\"50\">\n    cursor-arrow-rays\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_cursor-arrow-ripple.png\" width=\"50\">\n    cursor-arrow-ripple\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_device-phone-mobile.png\" width=\"50\">\n    device-phone-mobile\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_device-tablet.png\" width=\"50\">\n    device-tablet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_divide.png\" width=\"50\">\n    divide\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-arrow-down.png\" width=\"50\">\n    document-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-arrow-up.png\" width=\"50\">\n    document-arrow-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-chart-bar.png\" width=\"50\">\n    document-chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-check.png\" width=\"50\">\n    document-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-bangladeshi.png\" width=\"50\">\n    document-currency-bangladeshi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-dollar.png\" width=\"50\">\n    document-currency-dollar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-euro.png\" width=\"50\">\n    document-currency-euro\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-pound.png\" width=\"50\">\n    document-currency-pound\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-rupee.png\" width=\"50\">\n    document-currency-rupee\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-currency-yen.png\" width=\"50\">\n    document-currency-yen\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-duplicate.png\" width=\"50\">\n    document-duplicate\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-magnifying-glass.png\" width=\"50\">\n    document-magnifying-glass\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-minus.png\" width=\"50\">\n    document-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-plus.png\" width=\"50\">\n    document-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document-text.png\" width=\"50\">\n    document-text\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_document.png\" width=\"50\">\n    document\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-horizontal-circle.png\" width=\"50\">\n    ellipsis-horizontal-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-horizontal.png\" width=\"50\">\n    ellipsis-horizontal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ellipsis-vertical.png\" width=\"50\">\n    ellipsis-vertical\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_envelope-open.png\" width=\"50\">\n    envelope-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_envelope.png\" width=\"50\">\n    envelope\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_equals.png\" width=\"50\">\n    equals\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_exclamation-circle.png\" width=\"50\">\n    exclamation-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_exclamation-triangle.png\" width=\"50\">\n    exclamation-triangle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye-dropper.png\" width=\"50\">\n    eye-dropper\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye-slash.png\" width=\"50\">\n    eye-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_eye.png\" width=\"50\">\n    eye\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_face-frown.png\" width=\"50\">\n    face-frown\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_face-smile.png\" width=\"50\">\n    face-smile\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_film.png\" width=\"50\">\n    film\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_finger-print.png\" width=\"50\">\n    finger-print\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_fire.png\" width=\"50\">\n    fire\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_flag.png\" width=\"50\">\n    flag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-arrow-down.png\" width=\"50\">\n    folder-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-minus.png\" width=\"50\">\n    folder-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-open.png\" width=\"50\">\n    folder-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder-plus.png\" width=\"50\">\n    folder-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_folder.png\" width=\"50\">\n    folder\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_forward.png\" width=\"50\">\n    forward\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_funnel.png\" width=\"50\">\n    funnel\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gif.png\" width=\"50\">\n    gif\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gift-top.png\" width=\"50\">\n    gift-top\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_gift.png\" width=\"50\">\n    gift\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-alt.png\" width=\"50\">\n    globe-alt\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-americas.png\" width=\"50\">\n    globe-americas\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-asia-australia.png\" width=\"50\">\n    globe-asia-australia\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_globe-europe-africa.png\" width=\"50\">\n    globe-europe-africa\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h1.png\" width=\"50\">\n    h1\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h2.png\" width=\"50\">\n    h2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_h3.png\" width=\"50\">\n    h3\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-raised.png\" width=\"50\">\n    hand-raised\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-thumb-down.png\" width=\"50\">\n    hand-thumb-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hand-thumb-up.png\" width=\"50\">\n    hand-thumb-up\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_hashtag.png\" width=\"50\">\n    hashtag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_heart.png\" width=\"50\">\n    heart\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_home-modern.png\" width=\"50\">\n    home-modern\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_home.png\" width=\"50\">\n    home\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_identification.png\" width=\"50\">\n    identification\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox-arrow-down.png\" width=\"50\">\n    inbox-arrow-down\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox-stack.png\" width=\"50\">\n    inbox-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_inbox.png\" width=\"50\">\n    inbox\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_information-circle.png\" width=\"50\">\n    information-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_italic.png\" width=\"50\">\n    italic\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_key.png\" width=\"50\">\n    key\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_language.png\" width=\"50\">\n    language\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lifebuoy.png\" width=\"50\">\n    lifebuoy\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_light-bulb.png\" width=\"50\">\n    light-bulb\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_link-slash.png\" width=\"50\">\n    link-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_link.png\" width=\"50\">\n    link\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_list-bullet.png\" width=\"50\">\n    list-bullet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lock-closed.png\" width=\"50\">\n    lock-closed\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_lock-open.png\" width=\"50\">\n    lock-open\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-circle.png\" width=\"50\">\n    magnifying-glass-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-minus.png\" width=\"50\">\n    magnifying-glass-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass-plus.png\" width=\"50\">\n    magnifying-glass-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_magnifying-glass.png\" width=\"50\">\n    magnifying-glass\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_map-pin.png\" width=\"50\">\n    map-pin\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_map.png\" width=\"50\">\n    map\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_megaphone.png\" width=\"50\">\n    megaphone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_microphone.png\" width=\"50\">\n    microphone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_minus-circle.png\" width=\"50\">\n    minus-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_minus.png\" width=\"50\">\n    minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_moon.png\" width=\"50\">\n    moon\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_musical-note.png\" width=\"50\">\n    musical-note\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_newspaper.png\" width=\"50\">\n    newspaper\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_no-symbol.png\" width=\"50\">\n    no-symbol\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_numbered-list.png\" width=\"50\">\n    numbered-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paint-brush.png\" width=\"50\">\n    paint-brush\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paper-airplane.png\" width=\"50\">\n    paper-airplane\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_paper-clip.png\" width=\"50\">\n    paper-clip\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pause-circle.png\" width=\"50\">\n    pause-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pause.png\" width=\"50\">\n    pause\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pencil-square.png\" width=\"50\">\n    pencil-square\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_pencil.png\" width=\"50\">\n    pencil\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_percent-badge.png\" width=\"50\">\n    percent-badge\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-arrow-down-left.png\" width=\"50\">\n    phone-arrow-down-left\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-arrow-up-right.png\" width=\"50\">\n    phone-arrow-up-right\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone-x-mark.png\" width=\"50\">\n    phone-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_phone.png\" width=\"50\">\n    phone\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_photo.png\" width=\"50\">\n    photo\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play-circle.png\" width=\"50\">\n    play-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play-pause.png\" width=\"50\">\n    play-pause\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_play.png\" width=\"50\">\n    play\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_plus-circle.png\" width=\"50\">\n    plus-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_plus.png\" width=\"50\">\n    plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_power.png\" width=\"50\">\n    power\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_presentation-chart-bar.png\" width=\"50\">\n    presentation-chart-bar\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_presentation-chart-line.png\" width=\"50\">\n    presentation-chart-line\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_printer.png\" width=\"50\">\n    printer\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_puzzle-piece.png\" width=\"50\">\n    puzzle-piece\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_qr-code.png\" width=\"50\">\n    qr-code\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_question-mark-circle.png\" width=\"50\">\n    question-mark-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_queue-list.png\" width=\"50\">\n    queue-list\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_radio.png\" width=\"50\">\n    radio\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_receipt-percent.png\" width=\"50\">\n    receipt-percent\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_receipt-refund.png\" width=\"50\">\n    receipt-refund\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rectangle-group.png\" width=\"50\">\n    rectangle-group\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rectangle-stack.png\" width=\"50\">\n    rectangle-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rocket-launch.png\" width=\"50\">\n    rocket-launch\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_rss.png\" width=\"50\">\n    rss\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_scale.png\" width=\"50\">\n    scale\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_scissors.png\" width=\"50\">\n    scissors\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_server-stack.png\" width=\"50\">\n    server-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_server.png\" width=\"50\">\n    server\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_share.png\" width=\"50\">\n    share\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shield-check.png\" width=\"50\">\n    shield-check\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shield-exclamation.png\" width=\"50\">\n    shield-exclamation\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shopping-bag.png\" width=\"50\">\n    shopping-bag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_shopping-cart.png\" width=\"50\">\n    shopping-cart\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_signal-slash.png\" width=\"50\">\n    signal-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_signal.png\" width=\"50\">\n    signal\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_slash.png\" width=\"50\">\n    slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_sparkles.png\" width=\"50\">\n    sparkles\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_speaker-wave.png\" width=\"50\">\n    speaker-wave\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_speaker-x-mark.png\" width=\"50\">\n    speaker-x-mark\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_square-2-stack.png\" width=\"50\">\n    square-2-stack\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_square-3-stack-3d.png\" width=\"50\">\n    square-3-stack-3d\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_squares-2x2.png\" width=\"50\">\n    squares-2x2\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_squares-plus.png\" width=\"50\">\n    squares-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_star.png\" width=\"50\">\n    star\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_stop-circle.png\" width=\"50\">\n    stop-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_stop.png\" width=\"50\">\n    stop\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_strikethrough.png\" width=\"50\">\n    strikethrough\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_sun.png\" width=\"50\">\n    sun\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_swatch.png\" width=\"50\">\n    swatch\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_table-cells.png\" width=\"50\">\n    table-cells\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_tag.png\" width=\"50\">\n    tag\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_ticket.png\" width=\"50\">\n    ticket\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_trash.png\" width=\"50\">\n    trash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_trophy.png\" width=\"50\">\n    trophy\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_truck.png\" width=\"50\">\n    truck\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_tv.png\" width=\"50\">\n    tv\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_underline.png\" width=\"50\">\n    underline\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-circle.png\" width=\"50\">\n    user-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-group.png\" width=\"50\">\n    user-group\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-minus.png\" width=\"50\">\n    user-minus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user-plus.png\" width=\"50\">\n    user-plus\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_user.png\" width=\"50\">\n    user\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_users.png\" width=\"50\">\n    users\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_variable.png\" width=\"50\">\n    variable\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_video-camera-slash.png\" width=\"50\">\n    video-camera-slash\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_video-camera.png\" width=\"50\">\n    video-camera\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_view-columns.png\" width=\"50\">\n    view-columns\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_viewfinder-circle.png\" width=\"50\">\n    viewfinder-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wallet.png\" width=\"50\">\n    wallet\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wifi.png\" width=\"50\">\n    wifi\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_window.png\" width=\"50\">\n    window\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wrench-screwdriver.png\" width=\"50\">\n    wrench-screwdriver\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_wrench.png\" width=\"50\">\n    wrench\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_x-circle.png\" width=\"50\">\n    x-circle\n</div>\n\n<div style=\"flex: 1 0 auto; display: flex; width: 240px; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; \">\n    <img src=\"https://raw.githubusercontent.com/JuroOravec/djc-heroicons/main/assets/solid_x-mark.png\" width=\"50\">\n    x-mark\n</div>\n</div>\n\n<!-- INSERT_ICONS_END -->\n\n\n## Development\n\n### Tests\n\nTo run tests, use:\n\n```bash\ntox\n```\n\n### Updating icons\n\nTo download the icons from HeroIcons.com, run:\n\n```bash\npython scripts/download_icons.py\n```\n\nThis will save them to `src/djc_heroicons/icons.py`.\n\nNext, to update the list of icons in the README, run:\n\n```bash\npython scripts/gen_icon_docs.py\n```\n",
    "bugtrack_url": null,
    "license": "MIT",
    "summary": "Icons from HeroIcons.com for django-components",
    "version": "1.0.1",
    "project_urls": {
        "Homepage": "https://github.com/JuroOravec/djc-heroicons/"
    },
    "split_keywords": [
        "django",
        " components",
        " heroicons",
        " icon",
        " component",
        " html"
    ],
    "urls": [
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "5dade229894dca097fb90a4075a20d62f9ccf39facb2a8cb645d1cecfe40f1e6",
                "md5": "334990ff059fdb59998f4ea814edbe7f",
                "sha256": "4c38359d7e777b77ed1353474bf21021fcb8e8577a261cc96bcb74d7ee951d78"
            },
            "downloads": -1,
            "filename": "djc_heroicons-1.0.1-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "334990ff059fdb59998f4ea814edbe7f",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": "<4.0,>=3.8",
            "size": 84089,
            "upload_time": "2025-01-08T20:21:11",
            "upload_time_iso_8601": "2025-01-08T20:21:11.650159Z",
            "url": "https://files.pythonhosted.org/packages/5d/ad/e229894dca097fb90a4075a20d62f9ccf39facb2a8cb645d1cecfe40f1e6/djc_heroicons-1.0.1-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "87e4e5476246066e1fc71962e2122b6692d3b6386be04257d8df5f0a2661539c",
                "md5": "a967730ca4f585cbdec2efe7f2b4117a",
                "sha256": "2a3a45bed39e2acbdc0bf2ec67d40bd9e3e106d4adfdb1f819b631d1570c1515"
            },
            "downloads": -1,
            "filename": "djc_heroicons-1.0.1.tar.gz",
            "has_sig": false,
            "md5_digest": "a967730ca4f585cbdec2efe7f2b4117a",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": "<4.0,>=3.8",
            "size": 101152,
            "upload_time": "2025-01-08T20:21:15",
            "upload_time_iso_8601": "2025-01-08T20:21:15.141428Z",
            "url": "https://files.pythonhosted.org/packages/87/e4/e5476246066e1fc71962e2122b6692d3b6386be04257d8df5f0a2661539c/djc_heroicons-1.0.1.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2025-01-08 20:21:15",
    "github": true,
    "gitlab": false,
    "bitbucket": false,
    "codeberg": false,
    "github_user": "JuroOravec",
    "github_project": "djc-heroicons",
    "travis_ci": false,
    "coveralls": false,
    "github_actions": true,
    "tox": true,
    "lcname": "djc-heroicons"
}