dioxus-iconify

CLI tool for generating Iconify icons in Dioxus projects

Use any of the 275,000+ icons from Iconify in your Dioxus applications with a simple CLI tool. Icons are generated at build time as Rust source code, eliminating runtime dependencies.

✨ Features

• 🎨 275k+ Icons: Access icons from Material Design, Heroicons, FontAwesome, Lucide, and 200+ other icon sets
• 🦀 Type-Safe: Generated as Rust const values, checked at compile time
• 📦 Zero Runtime Dependencies: No need to depend on this crate at compile time and runtime - only Dioxus
• 🗂️ Well Organized: Icons grouped by collection in separate files
• 🎯 Fully Customizable: Override any SVG attribute (size, color, stroke, etc.)
• 💾 Git-Friendly: Generated code is committed to your repository
• ⚡ CLI-Based: Simple add command inspired by shadcn-ui and dioxus components

🚀 Quick Start

Installation

cargo install dioxus-iconify

Usage

1. Add icons to your project:

# Add single icon
dioxus-iconify add mdi:home

# Add multiple icons
dioxus-iconify add mdi:home mdi:account heroicons:arrow-left

# Specify custom output directory
dioxus-iconify --output src/components/icons add lucide:settings

2. Use in your Dioxus components:

use dioxus::prelude::*;

mod icons;
use icons::Icon;
use icons::mdi;

fn App() -> Element {
    rsx! {
        div {
            // Basic usage
            Icon { data: mdi::Home }

            // Custom size
            Icon {
                data: mdi::Home,
                width: "32",
                height: "32",
            }

            // Custom color and style
            Icon {
                data: mdi::Home,
                fill: "blue",
                class: "icon-class",
            }
        }
    }
}

📚 How It Works

The Problem

Existing Dioxus icon libraries typically bundle all icons in the crate, leading to:

• Large dependency sizes
• Slower compile times
• Including icons you don't use

The Solution

dioxus-iconify takes inspiration from shadcn-ui: instead of shipping icons as a dependency, it generates the icon code directly in your project.

What Gets Generated

When you run dioxus-iconify add mdi:home heroicons:arrow-left, it creates:

src/icons/
├── mod.rs         # Icon component + IconData struct + module declarations
├── mdi.rs         # Material Design Icons: Home, ...
└── heroicons.rs   # Heroicons: ArrowLeft, ...

src/icons/mod.rs:

// Auto-generated by dioxus-iconify - DO NOT EDIT

use dioxus::prelude::*;

#[derive(Clone, Copy)]
pub struct IconData {
    pub name: &'static str,
    pub body: &'static str,
    pub view_box: &'static str,
    pub width: &'static str,
    pub height: &'static str,
}

#[component]
pub fn Icon(
    data: IconData,
    #[props(extends = GlobalAttributes)]
    attributes: Vec<Attribute>,
) -> Element {
    rsx! {
        svg {
            view_box: "{data.view_box}",
            width: "{data.width}",
            height: "{data.height}",
            ..attributes,
            dangerous_inner_html: "{data.body}",
        }
    }
}

pub mod mdi;
pub mod heroicons;

src/icons/mdi.rs:

// Auto-generated by dioxus-iconify - DO NOT EDIT
// Collection: mdi

use super::IconData;

pub const Home: IconData = IconData {
    name: "mdi:home",
    body: r#"<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>"#,
    view_box: "0 0 24 24",
    width: "24",
    height: "24",
};

🎨 Icon Customization

The Icon component uses Dioxus 0.7's extends = GlobalAttributes pattern, allowing you to override any SVG attribute:

Icon {
    data: mdi::Home,
    // Size
    width: "48",
    height: "48",

    // Color
    fill: "currentColor",
    stroke: "#000000",
    stroke_width: "2",

    // CSS
    class: "my-icon hover:text-blue-500",
    style: "margin: 1rem;",

    // Accessibility
    aria_label: "Home icon",
    role: "img",

    // Any other SVG attribute...
}

🔍 Finding Icons

Browse available icons at:

• Iconify Icon Sets
• Icônes

Icon names follow the format collection:icon-name:

• mdi:home - Material Design Icons
• heroicons:arrow-left - Heroicons
• lucide:settings - Lucide
• fa:github - Font Awesome
• simple-icons:rust - Simple Icons

📖 CLI Commands

add

Add icons to your project:

dioxus-iconify add <icon>...

# Examples
dioxus-iconify add mdi:home
dioxus-iconify add mdi:home mdi:account heroicons:arrow-left
dioxus-iconify --output src/components/icons add lucide:settings

init

Initialize the icons directory (creates mod.rs):

dioxus-iconify init

Coming Soon

• remove - Remove icons from your project
• list - List all generated icons
• update - Re-fetch and update all icons

🆚 Comparison with Other Solutions

Some Embedded libraries of icons for dioxus: dioxus-free-icons, dioxus-material-icons, dioxus-heroicons, ...

Search Results for 'dioxus icons' - crates.io: Rust Package Registry

💡 Tips

1. Commit generated code: The src/icons/ directory should be committed to version control
2. Customize the Icon component: It's generated in your project, so modify it if needed
3. Use with Tailwind: Icon colors work with Tailwind's text-* classes via currentColor
4. Organization: Icons are automatically grouped by collection in separate files

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under either of:

• Apache License, Version 2.0 (LICENSE-APACHE)
• MIT License (LICENSE-MIT)

at your option.

🙏 Acknowledgments

• Iconify - For providing the amazing icon API and collections
• shadcn-ui - For inspiration on the CLI-based generation approach
• iconmate - For similar ideas in the TypeScript ecosystem
• Dioxus - The amazing Rust UI framework

📚 Resources

• Iconify Documentation
• Dioxus Documentation
• Browse Icons