ExIconify.Icon (ExIconify v0.1.0)

View Source

Phoenix component for rendering Iconify icons.

This module provides a convenient <.icon> component for use in Phoenix LiveView and HEEx templates.

Setup

Import the component in your web module:

# In lib/my_app_web.ex
defp html_helpers do
  quote do
    # ... other imports
    import ExIconify.Icon
  end
end

Or import directly in a specific LiveView/Component:

defmodule MyAppWeb.SomeLive do
  use MyAppWeb, :live_view
  import ExIconify.Icon
end

Usage

Basic usage:

<.icon name="lucide:home" />

With custom size and color:

<.icon name="lucide:heart" class="size-6 text-red-500" />

Different icon sets:

<.icon name="mdi:account" />
<.icon name="tabler:star" />
<.icon name="ph:house-bold" />

Animated spinner:

<.icon name="lucide:loader-2" class="size-5 animate-spin" />

Styling

Icons use currentColor for their fill/stroke, so they inherit the text color from their parent. Use Tailwind classes or custom CSS to style:

<.icon name="lucide:heart" class="size-6 text-red-500 hover:text-red-600" />

Common size classes:

  • size-4 (16px) - Small, inline with text
  • size-5 (20px) - Default button icon size
  • size-6 (24px) - Standard icon size
  • size-8 (32px) - Large icons
  • size-10 (40px) - Extra large

Summary

Functions

icon(assigns)

Renders an Iconify icon.

icon_button(assigns)

Renders an icon button.

icon_link(assigns)

Renders an icon link.

icon_with_label(assigns)

Renders an icon with a text label.

Functions

icon(assigns)

Renders an Iconify icon.

Attributes

  • name - Required. Icon name in format set:icon-name (e.g., lucide:home)
  • class - Optional. CSS classes for sizing and styling. Default: "size-4"

Examples

<.icon name="lucide:home" />
<.icon name="lucide:heart" class="size-6 text-red-500" />
<.icon name="mdi:account" class="size-8" />

Attributes

  • name (:string) (required) - Icon name in format set:icon-name.
  • class (:string) - CSS classes for sizing and styling. Defaults to "size-4".
  • Global attributes are accepted. Additional HTML attributes.

icon_button(assigns)

Renders an icon button.

Attributes

  • name - Required. Icon name
  • label - Required. Accessible label (shown in tooltip)
  • class - Additional button CSS classes
  • icon_class - Icon CSS classes

Examples

<.icon_button name="lucide:plus" label="Add item" />
<.icon_button name="lucide:trash" label="Delete" class="text-red-500" />

Attributes

  • name (:string) (required)
  • label (:string) (required) - Accessible label (shown in tooltip).
  • class (:string) - Defaults to "".
  • icon_class (:string) - Defaults to "size-5".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "type", "phx-click", "phx-target"].

icon_link(assigns)

Renders an icon link.

Attributes

  • name - Required. Icon name
  • label - Required. Accessible label
  • href - Required. Link destination
  • class - Additional CSS classes

Examples

<.icon_link name="lucide:external-link" label="Open docs" href="https://docs.example.com" />

Attributes

  • name (:string) (required)
  • label (:string) (required)
  • href (:string) (required)
  • class (:string) - Defaults to "".
  • icon_class (:string) - Defaults to "size-5".
  • Global attributes are accepted. Supports all globals plus: ["target", "rel"].

icon_with_label(assigns)

Renders an icon with a text label.

Attributes

  • name - Required. Icon name
  • label - Required. Text label to display
  • class - Container CSS classes
  • icon_class - Icon CSS classes

Examples

<.icon_with_label name="lucide:home" label="Home" />
<.icon_with_label name="lucide:settings" label="Settings" icon_class="size-5" />

Attributes

  • name (:string) (required)
  • label (:string) (required)
  • class (:string) - Defaults to "inline-flex items-center gap-2".
  • icon_class (:string) - Defaults to "size-4".
  • Global attributes are accepted.