dx_icons

Icon components for Dioxus 0.7 — popular open-source icon sets as native Dioxus components.

Icon Sets

Crate	Icons	crates.io	Description
dx_icons_feather	287		Feather Icons
dx_icons_lucide	~1700		Lucide Icons (Feather successor)
dx_icons_heroicons	324×2		Heroicons (outline + solid)
dx_icons_tabler	~5000		Tabler Icons
dx_icons_simple	~3400		Simple Icons (brand logos)

Installation

Option 1: Meta-crate with feature flags

Pick only the icon sets you need:

[dependencies]
dx_icons = { version = "0.1", features = ["lucide"] }

Available features: feather (default), lucide, heroicons, tabler, simple

Option 2: Depend on an icon set directly

[dependencies]
dx_icons_lucide = "0.1"
dx_icons_heroicons = "0.1"

Quick Start

use dx_icons::lucide::*;

fn App() -> Element {
    rsx! {
        // Enum-based usage
        Icon { icon: LucideIcon::Home }
        Icon { icon: LucideIcon::Search, size: 32, color: "red" }

        // Shorthand components
        IconHome {}
        IconSearch { size: 32 }
    }
}

Heroicons (outline + solid)

use dx_icons::heroicons::*;

rsx! {
    IconOutline { icon: HeroiconsOutline::Home }
    IconSolid { icon: HeroiconsSolid::Home, color: "blue" }

    // Shorthand components
    IconHomeOutline {}
    IconHomeSolid { size: 32 }
}

Simple Icons (brand logos)

use dx_icons::simple::*;

rsx! {
    Icon { icon: SimpleIcon::Github }
    Icon { icon: SimpleIcon::Docker, size: 32, color: "#2496ED" }

    // Shorthand
    IconGithub {}
    IconDocker { size: 48 }
}

Props

All icon components accept these props:

Prop	Type	Default	Description
icon	Enum	(required)	Which icon to render
size	u32	24	Width & height in px
color	String	"currentColor"	Stroke or fill color
stroke_width	f32	2.0	SVG stroke width
class	String	""	Extra CSS classes
fill	bool	false	Use fill instead of stroke

Note: Simple Icons (brand logos) only accept size, color, and class since they are always filled. Heroicons has separate IconOutline and IconSolid components with their own prop sets.

License

MIT