remix_icons

KO | EN

gitlite — search

#javascript #python #llm #golang #go #rust #deep-learning #docker #awesome #vue #pytorch #mcp #ios #openai

(★ 11)

2,800+ Icons for Phoenix LiveView

remix_icons Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# RemixIcons

[Remix Icon](https://remixicon.com/) for Phoenix, delivered as a **Tailwind CSS
plugin**. Over 2,800 pixel-perfect icons rendered with `mask-image` — no runtime
SVG reads, no caching, and only the icons you actually use end up in your
compiled stylesheet.

## Features

- 🎨 **2,800+ Icons**: the complete Remix Icon set
- ⚡ **Zero runtime**: icons are pure CSS, generated at asset-build time
- 🌳 **Tree-shaken**: only classes referenced in your templates are emitted
- 🎯 **Themeable**: icons inherit `currentColor` and resize with `size-*`/`w-*`/`h-*`

## Requirements

- Tailwind CSS v4 (the [`tailwind`](https://hex.pm/packages/tailwind) standalone
  CLI works — it bundles the Node APIs the plugin needs)

## Installation

Add `remix_icons` to your dependencies in `mix.exs`. It is consumed via git so
the SVG set is never unpacked through Hex — only `priv/` (the icons plus the
Tailwind plugin) is checked out, and nothing is compiled:

```elixir
def deps do
  [
    {:remix_icons,
     github: "gushonorato/remix_icons",
     tag: "v5.0.0",
     sparse: "priv",
     app: false,
     compile: false,
     depth: 1}
  ]
end
```

## Configuration

Register the plugin in your app's CSS (Tailwind v4 loads JS plugins with the
`@plugin` directive). The path is relative to your CSS file — from the default
`assets/css/app.css` it points into `deps`:

```css
@import "tailwindcss";

@plugin "../../deps/remix_icons/priv/remixicons";
```

That's it — no supervision tree changes, no cache to start.

## Usage

Each icon is available as a `ri-<name>` class, where `<name>` matches the name
shown on [remixicon.com](https://remixicon.com/):

```heex



```

The icon is colored by `currentColor` (set it with `text-*`) and sized with
`size-*` (or `w-*`/`h-*`).

### A `CoreComponents` wrapper (recommended)

For a more idiomatic call site, wrap the class in an `icon` component so
templates keep the familiar `<.icon name="ri-..." />` form:

```elixir
attr :name, :string, required: true
attr :class, :any, default: nil

def icon(%{name: "ri-" <> _} = assigns) do
 ~H"""
 
 """
end
```

```heex
<.icon name="ri-home-line" class="size-6" />
<.icon name="ri-user-fill" class="text-blue-500" />
```

### Finding Icon Names

Browse all available icons at [remixicon.com](https://remixicon.com/). The class
name is the icon name prefixed with `ri-` (e.g. `home-line` → `ri-home-line`).

## How it works

`priv/remixicons.js` is a Tailwind plugin that walks `priv/icons/<category>/*.svg`
and, for each icon referenced in your templates, inlines the SVG as a
`data:` URI behind `mask-image`. Because the shape comes from the mask and the
fill comes from `background-color: currentColor`, a single declaration handles
both line and fill variants and any color.

## Updating Icons

This package tracks the official
[Remix Icon repository](https://github.com/Remix-Design/RemixIcon). To refresh
the bundled SVGs:

1. Update `@remix_icon_version` in `mix.exs` to the desired Remix Icon release
2. Re-download the icon set:
   ```bash
   mix remix_clean
   mix remix_download
   ```
3. Bump `@version` in `mix.exs` and tag the release

### Useful Links

- [Remix Icon Official Site](https://remixicon.com/)
- [Remix Icon GitHub](https://github.com/Remix-Design/RemixIcon)

## License

This package is released under the MIT License.

Remix Icons are licensed under Apache License 2.0. See
[Remix Icon License](https://github.com/Remix-Design/RemixIcon/blob/master/License)
for details.

remix_icons

remix_icons Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

remix_icons

remix_icons Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README