djc-heroicons 1.1.0
Icons from HeroIcons.com for django-components
License: MIT
Requires Python: <4.0,>=3.8
Keywords: django, components, heroicons, icon, component, html

# 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!
]
```

### `VariantName`

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

`Literal["outline", "solid"]`

Use this for type validation and intellisense.

**Example:**

In the example below, the `"variant"` 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, VariantName

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

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

## 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-h