View Source Heroicons (ex_heroicons v3.1.0)

This package adds a convenient way of using Heroicons with your Phoenix, Phoenix LiveView and Surface applications.

Heroicons is "A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects." Created by the amazing folks at Tailwind Labs.

You can find the original docs here and repo here.

Installation

Add ex_heroicons and heroicons to the list of dependencies in mix.exs:

def deps do
  [
    {:ex_heroicons, "~> 3.1.0"},
    {:heroicons,
      github: "tailwindlabs/heroicons",
      tag: "v2.1.5",
      sparse: "optimized",
      app: false,
      compile: false,
      depth: 1}
  ]
end

Then run mix deps.get.

Usage

<Heroicons.icon name="academic-cap" type="outline" class="h-4 w-4" />

Config

Defaults can be set in the Heroicons application configuration.

config :ex_heroicons, type: "outline"

Summary

Functions

icon(assigns)

Attributes

name (:string) (required) - the name of the icon.Must be one of "academic-cap", "adjustments-horizontal", "adjustments-vertical", "archive-box-arrow-down", "archive-box-x-mark", "archive-box", "arrow-down-circle", "arrow-down-left", "arrow-down-on-square-stack", "arrow-down-on-square", "arrow-down-right", "arrow-down-tray", "arrow-down", "arrow-left-circle", "arrow-left-end-on-rectangle", "arrow-left-start-on-rectangle", "arrow-left", "arrow-long-down", "arrow-long-left", "arrow-long-right", "arrow-long-up", "arrow-path-rounded-square", "arrow-path", "arrow-right-circle", "arrow-right-end-on-rectangle", "arrow-right-start-on-rectangle", "arrow-right", "arrow-top-right-on-square", "arrow-trending-down", "arrow-trending-up", "arrow-turn-down-left", "arrow-turn-down-right", "arrow-turn-left-down", "arrow-turn-left-up", "arrow-turn-right-down", "arrow-turn-right-up", "arrow-turn-up-left", "arrow-turn-up-right", "arrow-up-circle", "arrow-up-left", "arrow-up-on-square-stack", "arrow-up-on-square", "arrow-up-right", "arrow-up-tray", "arrow-up", "arrow-uturn-down", "arrow-uturn-left", "arrow-uturn-right", "arrow-uturn-up", "arrows-pointing-in", "arrows-pointing-out", "arrows-right-left", "arrows-up-down", "at-symbol", "backspace", "backward", "banknotes", "bars-2", "bars-3-bottom-left", "bars-3-bottom-right", "bars-3-center-left", "bars-3", "bars-4", "bars-arrow-down", "bars-arrow-up", "battery-0", "battery-100", "battery-50", "beaker", "bell-alert", "bell-slash", "bell-snooze", "bell", "bold", "bolt-slash", "bolt", "book-open", "bookmark-slash", "bookmark-square", "bookmark", "briefcase", "bug-ant", "building-library", "building-office-2", "building-office", "building-storefront", "cake", "calculator", "calendar-date-range", "calendar-days", "calendar", "camera", "chart-bar-square", "chart-bar", "chart-pie", "chat-bubble-bottom-center-text", "chat-bubble-bottom-center", "chat-bubble-left-ellipsis", "chat-bubble-left-right", "chat-bubble-left", "chat-bubble-oval-left-ellipsis", "chat-bubble-oval-left", "check-badge", "check-circle", "check", "chevron-double-down", "chevron-double-left", "chevron-double-right", "chevron-double-up", "chevron-down", "chevron-left", "chevron-right", "chevron-up-down", "chevron-up", "circle-stack", "clipboard-document-check", "clipboard-document-list", "clipboard-document", "clipboard", "clock", "cloud-arrow-down", "cloud-arrow-up", "cloud", "code-bracket-square", "code-bracket", "cog-6-tooth", "cog-8-tooth", "cog", "command-line", "computer-desktop", "cpu-chip", "credit-card", "cube-transparent", "cube", "currency-bangladeshi", "currency-dollar", "currency-euro", "currency-pound", "currency-rupee", "currency-yen", "cursor-arrow-rays", "cursor-arrow-ripple", "device-phone-mobile", "device-tablet", "divide", "document-arrow-down", "document-arrow-up", "document-chart-bar", "document-check", "document-currency-bangladeshi", "document-currency-dollar", "document-currency-euro", "document-currency-pound", "document-currency-rupee", "document-currency-yen", "document-duplicate", "document-magnifying-glass", "document-minus", "document-plus", "document-text", "document", "ellipsis-horizontal-circle", "ellipsis-horizontal", "ellipsis-vertical", "envelope-open", "envelope", "equals", "exclamation-circle", "exclamation-triangle", "eye-dropper", "eye-slash", "eye", "face-frown", "face-smile", "film", "finger-print", "fire", "flag", "folder-arrow-down", "folder-minus", "folder-open", "folder-plus", "folder", "forward", "funnel", "gif", "gift-top", "gift", "globe-alt", "globe-americas", "globe-asia-australia", "globe-europe-africa", "h1", "h2", "h3", "hand-raised", "hand-thumb-down", "hand-thumb-up", "hashtag", "heart", "home-modern", "home", "identification", "inbox-arrow-down", "inbox-stack", "inbox", "information-circle", "italic", "key", "language", "lifebuoy", "light-bulb", "link-slash", "link", "list-bullet", "lock-closed", "lock-open", "magnifying-glass-circle", "magnifying-glass-minus", "magnifying-glass-plus", "magnifying-glass", "map-pin", "map", "megaphone", "microphone", "minus-circle", "minus", "moon", "musical-note", "newspaper", "no-symbol", "numbered-list", "paint-brush", "paper-airplane", "paper-clip", "pause-circle", "pause", "pencil-square", "pencil", "percent-badge", "phone-arrow-down-left", "phone-arrow-up-right", "phone-x-mark", "phone", "photo", "play-circle", "play-pause", "play", "plus-circle", "plus", "power", "presentation-chart-bar", "presentation-chart-line", "printer", "puzzle-piece", "qr-code", "question-mark-circle", "queue-list", "radio", "receipt-percent", "receipt-refund", "rectangle-group", "rectangle-stack", "rocket-launch", "rss", "scale", "scissors", "server-stack", "server", "share", "shield-check", "shield-exclamation", "shopping-bag", "shopping-cart", "signal-slash", "signal", "slash", "sparkles", "speaker-wave", "speaker-x-mark", "square-2-stack", "square-3-stack-3d", "squares-2x2", "squares-plus", "star", "stop-circle", "stop", "strikethrough", "sun", "swatch", "table-cells", "tag", "ticket", "trash", "trophy", "truck", "tv", "underline", "user-circle", "user-group", "user-minus", "user-plus", "user", "users", "variable", "video-camera-slash", "video-camera", "view-columns", "viewfinder-circle", "wallet", "wifi", "window", "wrench-screwdriver", "wrench", "x-circle", "x-mark", "arrow-left-on-rectangle", "arrow-right-on-rectangle", "arrow-small-down", "arrow-small-left", "arrow-small-right", "arrow-small-up", "minus-small", or "plus-small".
type (:string) - the type of the icon. Defaults to "outline".
class (:string) - the css classes to add to the svg container. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the svg container.

names()

types()

Functions

icon(assigns)

Attributes

name (:string) (required) - the name of the icon.Must be one of "academic-cap", "adjustments-horizontal", "adjustments-vertical", "archive-box-arrow-down", "archive-box-x-mark", "archive-box", "arrow-down-circle", "arrow-down-left", "arrow-down-on-square-stack", "arrow-down-on-square", "arrow-down-right", "arrow-down-tray", "arrow-down", "arrow-left-circle", "arrow-left-end-on-rectangle", "arrow-left-start-on-rectangle", "arrow-left", "arrow-long-down", "arrow-long-left", "arrow-long-right", "arrow-long-up", "arrow-path-rounded-square", "arrow-path", "arrow-right-circle", "arrow-right-end-on-rectangle", "arrow-right-start-on-rectangle", "arrow-right", "arrow-top-right-on-square", "arrow-trending-down", "arrow-trending-up", "arrow-turn-down-left", "arrow-turn-down-right", "arrow-turn-left-down", "arrow-turn-left-up", "arrow-turn-right-down", "arrow-turn-right-up", "arrow-turn-up-left", "arrow-turn-up-right", "arrow-up-circle", "arrow-up-left", "arrow-up-on-square-stack", "arrow-up-on-square", "arrow-up-right", "arrow-up-tray", "arrow-up", "arrow-uturn-down", "arrow-uturn-left", "arrow-uturn-right", "arrow-uturn-up", "arrows-pointing-in", "arrows-pointing-out", "arrows-right-left", "arrows-up-down", "at-symbol", "backspace", "backward", "banknotes", "bars-2", "bars-3-bottom-left", "bars-3-bottom-right", "bars-3-center-left", "bars-3", "bars-4", "bars-arrow-down", "bars-arrow-up", "battery-0", "battery-100", "battery-50", "beaker", "bell-alert", "bell-slash", "bell-snooze", "bell", "bold", "bolt-slash", "bolt", "book-open", "bookmark-slash", "bookmark-square", "bookmark", "briefcase", "bug-ant", "building-library", "building-office-2", "building-office", "building-storefront", "cake", "calculator", "calendar-date-range", "calendar-days", "calendar", "camera", "chart-bar-square", "chart-bar", "chart-pie", "chat-bubble-bottom-center-text", "chat-bubble-bottom-center", "chat-bubble-left-ellipsis", "chat-bubble-left-right", "chat-bubble-left", "chat-bubble-oval-left-ellipsis", "chat-bubble-oval-left", "check-badge", "check-circle", "check", "chevron-double-down", "chevron-double-left", "chevron-double-right", "chevron-double-up", "chevron-down", "chevron-left", "chevron-right", "chevron-up-down", "chevron-up", "circle-stack", "clipboard-document-check", "clipboard-document-list", "clipboard-document", "clipboard", "clock", "cloud-arrow-down", "cloud-arrow-up", "cloud", "code-bracket-square", "code-bracket", "cog-6-tooth", "cog-8-tooth", "cog", "command-line", "computer-desktop", "cpu-chip", "credit-card", "cube-transparent", "cube", "currency-bangladeshi", "currency-dollar", "currency-euro", "currency-pound", "currency-rupee", "currency-yen", "cursor-arrow-rays", "cursor-arrow-ripple", "device-phone-mobile", "device-tablet", "divide", "document-arrow-down", "document-arrow-up", "document-chart-bar", "document-check", "document-currency-bangladeshi", "document-currency-dollar", "document-currency-euro", "document-currency-pound", "document-currency-rupee", "document-currency-yen", "document-duplicate", "document-magnifying-glass", "document-minus", "document-plus", "document-text", "document", "ellipsis-horizontal-circle", "ellipsis-horizontal", "ellipsis-vertical", "envelope-open", "envelope", "equals", "exclamation-circle", "exclamation-triangle", "eye-dropper", "eye-slash", "eye", "face-frown", "face-smile", "film", "finger-print", "fire", "flag", "folder-arrow-down", "folder-minus", "folder-open", "folder-plus", "folder", "forward", "funnel", "gif", "gift-top", "gift", "globe-alt", "globe-americas", "globe-asia-australia", "globe-europe-africa", "h1", "h2", "h3", "hand-raised", "hand-thumb-down", "hand-thumb-up", "hashtag", "heart", "home-modern", "home", "identification", "inbox-arrow-down", "inbox-stack", "inbox", "information-circle", "italic", "key", "language", "lifebuoy", "light-bulb", "link-slash", "link", "list-bullet", "lock-closed", "lock-open", "magnifying-glass-circle", "magnifying-glass-minus", "magnifying-glass-plus", "magnifying-glass", "map-pin", "map", "megaphone", "microphone", "minus-circle", "minus", "moon", "musical-note", "newspaper", "no-symbol", "numbered-list", "paint-brush", "paper-airplane", "paper-clip", "pause-circle", "pause", "pencil-square", "pencil", "percent-badge", "phone-arrow-down-left", "phone-arrow-up-right", "phone-x-mark", "phone", "photo", "play-circle", "play-pause", "play", "plus-circle", "plus", "power", "presentation-chart-bar", "presentation-chart-line", "printer", "puzzle-piece", "qr-code", "question-mark-circle", "queue-list", "radio", "receipt-percent", "receipt-refund", "rectangle-group", "rectangle-stack", "rocket-launch", "rss", "scale", "scissors", "server-stack", "server", "share", "shield-check", "shield-exclamation", "shopping-bag", "shopping-cart", "signal-slash", "signal", "slash", "sparkles", "speaker-wave", "speaker-x-mark", "square-2-stack", "square-3-stack-3d", "squares-2x2", "squares-plus", "star", "stop-circle", "stop", "strikethrough", "sun", "swatch", "table-cells", "tag", "ticket", "trash", "trophy", "truck", "tv", "underline", "user-circle", "user-group", "user-minus", "user-plus", "user", "users", "variable", "video-camera-slash", "video-camera", "view-columns", "viewfinder-circle", "wallet", "wifi", "window", "wrench-screwdriver", "wrench", "x-circle", "x-mark", "arrow-left-on-rectangle", "arrow-right-on-rectangle", "arrow-small-down", "arrow-small-left", "arrow-small-right", "arrow-small-up", "minus-small", or "plus-small".
type (:string) - the type of the icon. Defaults to "outline".
class (:string) - the css classes to add to the svg container. Defaults to nil.
Global attributes are accepted. the arbitrary HTML attributes to add to the svg container.