Introduction
Rust Lucide is a Rust port of Lucide.
Lucide is a beautiful & consistent icon toolkit made by the community.
Frameworks
Rust Lucide is available for the following frameworks:
License
This project is available under the MIT license.
Rust For Web
The Rust Lucide project is part of Rust For Web.
Rust For Web creates and ports web UI libraries for Rust. All projects are free and open source.
Frameworks
Lucide Dioxus
Implementation of the Lucide icon library for Dioxus applications.
Installation
cargo add lucide-dioxus
Usage
use dioxus::prelude::*;
use lucide_dioxus::Camera;
#[component]
fn App() -> Element {
rsx! {
Camera {
color: "red",
size: 48,
}
}
}Props
| Name | Type | Default |
|---|---|---|
size | usize | 24 |
color | String | "currentColor" |
fill | String | "none" |
stroke_width | usize | 2 |
absolute_stroke_width | bool | false |
Icons
use dioxus::prelude::*;
use lucide_dioxus::*;
#[component]
pub fn Icons() -> Element {
rsx! {
div { class: "w-full max-w-80 py-4",
IconsA1 {}
IconsA2 {}
IconsB1 {}
IconsB2 {}
IconsC1 {}
IconsC2 {}
IconsC3 {}
IconsD1 {}
IconsE1 {}
IconsF1 {}
IconsF2 {}
IconsG1 {}
IconsH1 {}
IconsI1 {}
IconsJ1 {}
IconsK1 {}
IconsL1 {}
IconsM1 {}
IconsM2 {}
IconsN1 {}
IconsO1 {}
IconsP1 {}
IconsQ1 {}
IconsR1 {}
IconsS1 {}
IconsS2 {}
IconsT1 {}
IconsU1 {}
IconsV1 {}
IconsW1 {}
IconsX1 {}
IconsY1 {}
IconsZ1 {}
}
}
}
#[component]
pub fn IconsA1() -> Element {
let icons = [
(
rsx! {
AArrowDown {}
},
"A Arrow Down",
),
(
rsx! {
AArrowUp {}
},
"A Arrow Up",
),
(
rsx! {
ALargeSmall {}
},
"A Large Small",
),
(
rsx! {
Accessibility {}
},
"Accessibility",
),
(
rsx! {
Activity {}
},
"Activity",
),
(
rsx! {
AirVent {}
},
"Air Vent",
),
(
rsx! {
Airplay {}
},
"Airplay",
),
(
rsx! {
AlarmClock {}
},
"Alarm Clock",
),
(
rsx! {
AlarmClockCheck {}
},
"Alarm Clock Check",
),
(
rsx! {
AlarmClockMinus {}
},
"Alarm Clock Minus",
),
(
rsx! {
AlarmClockOff {}
},
"Alarm Clock Off",
),
(
rsx! {
AlarmClockPlus {}
},
"Alarm Clock Plus",
),
(
rsx! {
AlarmSmoke {}
},
"Alarm Smoke",
),
(
rsx! {
Album {}
},
"Album",
),
(
rsx! {
AlignCenter {}
},
"Align Center",
),
(
rsx! {
AlignCenterHorizontal {}
},
"Align Center Horizontal",
),
(
rsx! {
AlignCenterVertical {}
},
"Align Center Vertical",
),
(
rsx! {
AlignEndHorizontal {}
},
"Align End Horizontal",
),
(
rsx! {
AlignEndVertical {}
},
"Align End Vertical",
),
(
rsx! {
AlignHorizontalDistributeCenter {}
},
"Align Horizontal Distribute Center",
),
(
rsx! {
AlignHorizontalDistributeEnd {}
},
"Align Horizontal Distribute End",
),
(
rsx! {
AlignHorizontalDistributeStart {}
},
"Align Horizontal Distribute Start",
),
(
rsx! {
AlignHorizontalJustifyCenter {}
},
"Align Horizontal Justify Center",
),
(
rsx! {
AlignHorizontalJustifyEnd {}
},
"Align Horizontal Justify End",
),
(
rsx! {
AlignHorizontalJustifyStart {}
},
"Align Horizontal Justify Start",
),
(
rsx! {
AlignHorizontalSpaceAround {}
},
"Align Horizontal Space Around",
),
(
rsx! {
AlignHorizontalSpaceBetween {}
},
"Align Horizontal Space Between",
),
(
rsx! {
AlignJustify {}
},
"Align Justify",
),
(
rsx! {
AlignLeft {}
},
"Align Left",
),
(
rsx! {
AlignRight {}
},
"Align Right",
),
(
rsx! {
AlignStartHorizontal {}
},
"Align Start Horizontal",
),
(
rsx! {
AlignStartVertical {}
},
"Align Start Vertical",
),
(
rsx! {
AlignVerticalDistributeCenter {}
},
"Align Vertical Distribute Center",
),
(
rsx! {
AlignVerticalDistributeEnd {}
},
"Align Vertical Distribute End",
),
(
rsx! {
AlignVerticalDistributeStart {}
},
"Align Vertical Distribute Start",
),
(
rsx! {
AlignVerticalJustifyCenter {}
},
"Align Vertical Justify Center",
),
(
rsx! {
AlignVerticalJustifyEnd {}
},
"Align Vertical Justify End",
),
(
rsx! {
AlignVerticalJustifyStart {}
},
"Align Vertical Justify Start",
),
(
rsx! {
AlignVerticalSpaceAround {}
},
"Align Vertical Space Around",
),
(
rsx! {
AlignVerticalSpaceBetween {}
},
"Align Vertical Space Between",
),
(
rsx! {
Ambulance {}
},
"Ambulance",
),
(
rsx! {
Ampersand {}
},
"Ampersand",
),
(
rsx! {
Ampersands {}
},
"Ampersands",
),
(
rsx! {
Amphora {}
},
"Amphora",
),
(
rsx! {
Anchor {}
},
"Anchor",
),
(
rsx! {
Angry {}
},
"Angry",
),
(
rsx! {
Annoyed {}
},
"Annoyed",
),
(
rsx! {
Antenna {}
},
"Antenna",
),
(
rsx! {
Anvil {}
},
"Anvil",
),
(
rsx! {
Aperture {}
},
"Aperture",
),
(
rsx! {
AppWindow {}
},
"App Window",
),
(
rsx! {
AppWindowMac {}
},
"App Window Mac",
),
(
rsx! {
Apple {}
},
"Apple",
),
(
rsx! {
Archive {}
},
"Archive",
),
(
rsx! {
ArchiveRestore {}
},
"Archive Restore",
),
(
rsx! {
ArchiveX {}
},
"Archive X",
),
(
rsx! {
Armchair {}
},
"Armchair",
),
(
rsx! {
ArrowBigDown {}
},
"Arrow Big Down",
),
(
rsx! {
ArrowBigDownDash {}
},
"Arrow Big Down Dash",
),
(
rsx! {
ArrowBigLeft {}
},
"Arrow Big Left",
),
(
rsx! {
ArrowBigLeftDash {}
},
"Arrow Big Left Dash",
),
(
rsx! {
ArrowBigRight {}
},
"Arrow Big Right",
),
(
rsx! {
ArrowBigRightDash {}
},
"Arrow Big Right Dash",
),
(
rsx! {
ArrowBigUp {}
},
"Arrow Big Up",
),
(
rsx! {
ArrowBigUpDash {}
},
"Arrow Big Up Dash",
),
(
rsx! {
ArrowDown {}
},
"Arrow Down",
),
(
rsx! {
ArrowDown01 {}
},
"Arrow Down 01",
),
(
rsx! {
ArrowDown10 {}
},
"Arrow Down 10",
),
(
rsx! {
ArrowDownAZ {}
},
"Arrow Down Az",
),
(
rsx! {
ArrowDownFromLine {}
},
"Arrow Down From Line",
),
(
rsx! {
ArrowDownLeft {}
},
"Arrow Down Left",
),
(
rsx! {
ArrowDownNarrowWide {}
},
"Arrow Down Narrow Wide",
),
(
rsx! {
ArrowDownRight {}
},
"Arrow Down Right",
),
(
rsx! {
ArrowDownToDot {}
},
"Arrow Down To Dot",
),
(
rsx! {
ArrowDownToLine {}
},
"Arrow Down To Line",
),
(
rsx! {
ArrowDownUp {}
},
"Arrow Down Up",
),
(
rsx! {
ArrowDownWideNarrow {}
},
"Arrow Down Wide Narrow",
),
(
rsx! {
ArrowDownZA {}
},
"Arrow Down Za",
),
(
rsx! {
ArrowLeft {}
},
"Arrow Left",
),
(
rsx! {
ArrowLeftFromLine {}
},
"Arrow Left From Line",
),
(
rsx! {
ArrowLeftRight {}
},
"Arrow Left Right",
),
(
rsx! {
ArrowLeftToLine {}
},
"Arrow Left To Line",
),
(
rsx! {
ArrowRight {}
},
"Arrow Right",
),
(
rsx! {
ArrowRightFromLine {}
},
"Arrow Right From Line",
),
(
rsx! {
ArrowRightLeft {}
},
"Arrow Right Left",
),
(
rsx! {
ArrowRightToLine {}
},
"Arrow Right To Line",
),
(
rsx! {
ArrowUp {}
},
"Arrow Up",
),
(
rsx! {
ArrowUp01 {}
},
"Arrow Up 01",
),
(
rsx! {
ArrowUp10 {}
},
"Arrow Up 10",
),
(
rsx! {
ArrowUpAZ {}
},
"Arrow Up Az",
),
(
rsx! {
ArrowUpDown {}
},
"Arrow Up Down",
),
(
rsx! {
ArrowUpFromDot {}
},
"Arrow Up From Dot",
),
(
rsx! {
ArrowUpFromLine {}
},
"Arrow Up From Line",
),
(
rsx! {
ArrowUpLeft {}
},
"Arrow Up Left",
),
(
rsx! {
ArrowUpNarrowWide {}
},
"Arrow Up Narrow Wide",
),
(
rsx! {
ArrowUpRight {}
},
"Arrow Up Right",
),
(
rsx! {
ArrowUpToLine {}
},
"Arrow Up To Line",
),
(
rsx! {
ArrowUpWideNarrow {}
},
"Arrow Up Wide Narrow",
),
(
rsx! {
ArrowUpZA {}
},
"Arrow Up Za",
),
(
rsx! {
ArrowsUpFromLine {}
},
"Arrows Up From Line",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsA2() -> Element {
let icons = [
(
rsx! {
Asterisk {}
},
"Asterisk",
),
(
rsx! {
AtSign {}
},
"At Sign",
),
(
rsx! {
Atom {}
},
"Atom",
),
(
rsx! {
AudioLines {}
},
"Audio Lines",
),
(
rsx! {
AudioWaveform {}
},
"Audio Waveform",
),
(
rsx! {
Award {}
},
"Award",
),
(
rsx! {
Axe {}
},
"Axe",
),
(
rsx! {
Axis3D {}
},
"Axis 3 D",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsB1() -> Element {
let icons = [
(
rsx! {
Baby {}
},
"Baby",
),
(
rsx! {
Backpack {}
},
"Backpack",
),
(
rsx! {
Badge {}
},
"Badge",
),
(
rsx! {
BadgeAlert {}
},
"Badge Alert",
),
(
rsx! {
BadgeCent {}
},
"Badge Cent",
),
(
rsx! {
BadgeCheck {}
},
"Badge Check",
),
(
rsx! {
BadgeDollarSign {}
},
"Badge Dollar Sign",
),
(
rsx! {
BadgeEuro {}
},
"Badge Euro",
),
(
rsx! {
BadgeHelp {}
},
"Badge Help",
),
(
rsx! {
BadgeIndianRupee {}
},
"Badge Indian Rupee",
),
(
rsx! {
BadgeInfo {}
},
"Badge Info",
),
(
rsx! {
BadgeJapaneseYen {}
},
"Badge Japanese Yen",
),
(
rsx! {
BadgeMinus {}
},
"Badge Minus",
),
(
rsx! {
BadgePercent {}
},
"Badge Percent",
),
(
rsx! {
BadgePlus {}
},
"Badge Plus",
),
(
rsx! {
BadgePoundSterling {}
},
"Badge Pound Sterling",
),
(
rsx! {
BadgeRussianRuble {}
},
"Badge Russian Ruble",
),
(
rsx! {
BadgeSwissFranc {}
},
"Badge Swiss Franc",
),
(
rsx! {
BadgeX {}
},
"Badge X",
),
(
rsx! {
BaggageClaim {}
},
"Baggage Claim",
),
(
rsx! {
Ban {}
},
"Ban",
),
(
rsx! {
Banana {}
},
"Banana",
),
(
rsx! {
Bandage {}
},
"Bandage",
),
(
rsx! {
Banknote {}
},
"Banknote",
),
(
rsx! {
Barcode {}
},
"Barcode",
),
(
rsx! {
Baseline {}
},
"Baseline",
),
(
rsx! {
Bath {}
},
"Bath",
),
(
rsx! {
Battery {}
},
"Battery",
),
(
rsx! {
BatteryCharging {}
},
"Battery Charging",
),
(
rsx! {
BatteryFull {}
},
"Battery Full",
),
(
rsx! {
BatteryLow {}
},
"Battery Low",
),
(
rsx! {
BatteryMedium {}
},
"Battery Medium",
),
(
rsx! {
BatteryWarning {}
},
"Battery Warning",
),
(
rsx! {
Beaker {}
},
"Beaker",
),
(
rsx! {
Bean {}
},
"Bean",
),
(
rsx! {
BeanOff {}
},
"Bean Off",
),
(
rsx! {
Bed {}
},
"Bed",
),
(
rsx! {
BedDouble {}
},
"Bed Double",
),
(
rsx! {
BedSingle {}
},
"Bed Single",
),
(
rsx! {
Beef {}
},
"Beef",
),
(
rsx! {
Beer {}
},
"Beer",
),
(
rsx! {
BeerOff {}
},
"Beer Off",
),
(
rsx! {
Bell {}
},
"Bell",
),
(
rsx! {
BellDot {}
},
"Bell Dot",
),
(
rsx! {
BellElectric {}
},
"Bell Electric",
),
(
rsx! {
BellMinus {}
},
"Bell Minus",
),
(
rsx! {
BellOff {}
},
"Bell Off",
),
(
rsx! {
BellPlus {}
},
"Bell Plus",
),
(
rsx! {
BellRing {}
},
"Bell Ring",
),
(
rsx! {
BetweenHorizontalEnd {}
},
"Between Horizontal End",
),
(
rsx! {
BetweenHorizontalStart {}
},
"Between Horizontal Start",
),
(
rsx! {
BetweenVerticalEnd {}
},
"Between Vertical End",
),
(
rsx! {
BetweenVerticalStart {}
},
"Between Vertical Start",
),
(
rsx! {
BicepsFlexed {}
},
"Biceps Flexed",
),
(
rsx! {
Bike {}
},
"Bike",
),
(
rsx! {
Binary {}
},
"Binary",
),
(
rsx! {
Binoculars {}
},
"Binoculars",
),
(
rsx! {
Biohazard {}
},
"Biohazard",
),
(
rsx! {
Bird {}
},
"Bird",
),
(
rsx! {
Bitcoin {}
},
"Bitcoin",
),
(
rsx! {
Blend {}
},
"Blend",
),
(
rsx! {
Blinds {}
},
"Blinds",
),
(
rsx! {
Blocks {}
},
"Blocks",
),
(
rsx! {
Bluetooth {}
},
"Bluetooth",
),
(
rsx! {
BluetoothConnected {}
},
"Bluetooth Connected",
),
(
rsx! {
BluetoothOff {}
},
"Bluetooth Off",
),
(
rsx! {
BluetoothSearching {}
},
"Bluetooth Searching",
),
(
rsx! {
Bold {}
},
"Bold",
),
(
rsx! {
Bolt {}
},
"Bolt",
),
(
rsx! {
Bomb {}
},
"Bomb",
),
(
rsx! {
Bone {}
},
"Bone",
),
(
rsx! {
Book {}
},
"Book",
),
(
rsx! {
BookA {}
},
"Book A",
),
(
rsx! {
BookAudio {}
},
"Book Audio",
),
(
rsx! {
BookCheck {}
},
"Book Check",
),
(
rsx! {
BookCopy {}
},
"Book Copy",
),
(
rsx! {
BookDashed {}
},
"Book Dashed",
),
(
rsx! {
BookDown {}
},
"Book Down",
),
(
rsx! {
BookHeadphones {}
},
"Book Headphones",
),
(
rsx! {
BookHeart {}
},
"Book Heart",
),
(
rsx! {
BookImage {}
},
"Book Image",
),
(
rsx! {
BookKey {}
},
"Book Key",
),
(
rsx! {
BookLock {}
},
"Book Lock",
),
(
rsx! {
BookMarked {}
},
"Book Marked",
),
(
rsx! {
BookMinus {}
},
"Book Minus",
),
(
rsx! {
BookOpen {}
},
"Book Open",
),
(
rsx! {
BookOpenCheck {}
},
"Book Open Check",
),
(
rsx! {
BookOpenText {}
},
"Book Open Text",
),
(
rsx! {
BookPlus {}
},
"Book Plus",
),
(
rsx! {
BookText {}
},
"Book Text",
),
(
rsx! {
BookType {}
},
"Book Type",
),
(
rsx! {
BookUp {}
},
"Book Up",
),
(
rsx! {
BookUp2 {}
},
"Book Up 2",
),
(
rsx! {
BookUser {}
},
"Book User",
),
(
rsx! {
BookX {}
},
"Book X",
),
(
rsx! {
Bookmark {}
},
"Bookmark",
),
(
rsx! {
BookmarkCheck {}
},
"Bookmark Check",
),
(
rsx! {
BookmarkMinus {}
},
"Bookmark Minus",
),
(
rsx! {
BookmarkPlus {}
},
"Bookmark Plus",
),
(
rsx! {
BookmarkX {}
},
"Bookmark X",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsB2() -> Element {
let icons = [
(
rsx! {
BoomBox {}
},
"Boom Box",
),
(
rsx! {
Bot {}
},
"Bot",
),
(
rsx! {
BotMessageSquare {}
},
"Bot Message Square",
),
(
rsx! {
BotOff {}
},
"Bot Off",
),
(
rsx! {
Box {}
},
"Box",
),
(
rsx! {
Boxes {}
},
"Boxes",
),
(
rsx! {
Braces {}
},
"Braces",
),
(
rsx! {
Brackets {}
},
"Brackets",
),
(
rsx! {
Brain {}
},
"Brain",
),
(
rsx! {
BrainCircuit {}
},
"Brain Circuit",
),
(
rsx! {
BrainCog {}
},
"Brain Cog",
),
(
rsx! {
BrickWall {}
},
"Brick Wall",
),
(
rsx! {
Briefcase {}
},
"Briefcase",
),
(
rsx! {
BriefcaseBusiness {}
},
"Briefcase Business",
),
(
rsx! {
BriefcaseConveyorBelt {}
},
"Briefcase Conveyor Belt",
),
(
rsx! {
BriefcaseMedical {}
},
"Briefcase Medical",
),
(
rsx! {
BringToFront {}
},
"Bring To Front",
),
(
rsx! {
Brush {}
},
"Brush",
),
(
rsx! {
Bug {}
},
"Bug",
),
(
rsx! {
BugOff {}
},
"Bug Off",
),
(
rsx! {
BugPlay {}
},
"Bug Play",
),
(
rsx! {
Building {}
},
"Building",
),
(
rsx! {
Building2 {}
},
"Building 2",
),
(
rsx! {
Bus {}
},
"Bus",
),
(
rsx! {
BusFront {}
},
"Bus Front",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsC1() -> Element {
let icons = [
(
rsx! {
Cable {}
},
"Cable",
),
(
rsx! {
CableCar {}
},
"Cable Car",
),
(
rsx! {
Cake {}
},
"Cake",
),
(
rsx! {
CakeSlice {}
},
"Cake Slice",
),
(
rsx! {
Calculator {}
},
"Calculator",
),
(
rsx! {
Calendar {}
},
"Calendar",
),
(
rsx! {
Calendar1 {}
},
"Calendar 1",
),
(
rsx! {
CalendarArrowDown {}
},
"Calendar Arrow Down",
),
(
rsx! {
CalendarArrowUp {}
},
"Calendar Arrow Up",
),
(
rsx! {
CalendarCheck {}
},
"Calendar Check",
),
(
rsx! {
CalendarCheck2 {}
},
"Calendar Check 2",
),
(
rsx! {
CalendarClock {}
},
"Calendar Clock",
),
(
rsx! {
CalendarCog {}
},
"Calendar Cog",
),
(
rsx! {
CalendarDays {}
},
"Calendar Days",
),
(
rsx! {
CalendarFold {}
},
"Calendar Fold",
),
(
rsx! {
CalendarHeart {}
},
"Calendar Heart",
),
(
rsx! {
CalendarMinus {}
},
"Calendar Minus",
),
(
rsx! {
CalendarMinus2 {}
},
"Calendar Minus 2",
),
(
rsx! {
CalendarOff {}
},
"Calendar Off",
),
(
rsx! {
CalendarPlus {}
},
"Calendar Plus",
),
(
rsx! {
CalendarPlus2 {}
},
"Calendar Plus 2",
),
(
rsx! {
CalendarRange {}
},
"Calendar Range",
),
(
rsx! {
CalendarSearch {}
},
"Calendar Search",
),
(
rsx! {
CalendarSync {}
},
"Calendar Sync",
),
(
rsx! {
CalendarX {}
},
"Calendar X",
),
(
rsx! {
CalendarX2 {}
},
"Calendar X 2",
),
(
rsx! {
Camera {}
},
"Camera",
),
(
rsx! {
CameraOff {}
},
"Camera Off",
),
(
rsx! {
Candy {}
},
"Candy",
),
(
rsx! {
CandyCane {}
},
"Candy Cane",
),
(
rsx! {
CandyOff {}
},
"Candy Off",
),
(
rsx! {
Cannabis {}
},
"Cannabis",
),
(
rsx! {
Captions {}
},
"Captions",
),
(
rsx! {
CaptionsOff {}
},
"Captions Off",
),
(
rsx! {
Car {}
},
"Car",
),
(
rsx! {
CarFront {}
},
"Car Front",
),
(
rsx! {
CarTaxiFront {}
},
"Car Taxi Front",
),
(
rsx! {
Caravan {}
},
"Caravan",
),
(
rsx! {
Carrot {}
},
"Carrot",
),
(
rsx! {
CaseLower {}
},
"Case Lower",
),
(
rsx! {
CaseSensitive {}
},
"Case Sensitive",
),
(
rsx! {
CaseUpper {}
},
"Case Upper",
),
(
rsx! {
CassetteTape {}
},
"Cassette Tape",
),
(
rsx! {
Cast {}
},
"Cast",
),
(
rsx! {
Castle {}
},
"Castle",
),
(
rsx! {
Cat {}
},
"Cat",
),
(
rsx! {
Cctv {}
},
"Cctv",
),
(
rsx! {
ChartArea {}
},
"Chart Area",
),
(
rsx! {
ChartBar {}
},
"Chart Bar",
),
(
rsx! {
ChartBarBig {}
},
"Chart Bar Big",
),
(
rsx! {
ChartBarDecreasing {}
},
"Chart Bar Decreasing",
),
(
rsx! {
ChartBarIncreasing {}
},
"Chart Bar Increasing",
),
(
rsx! {
ChartBarStacked {}
},
"Chart Bar Stacked",
),
(
rsx! {
ChartCandlestick {}
},
"Chart Candlestick",
),
(
rsx! {
ChartColumn {}
},
"Chart Column",
),
(
rsx! {
ChartColumnBig {}
},
"Chart Column Big",
),
(
rsx! {
ChartColumnDecreasing {}
},
"Chart Column Decreasing",
),
(
rsx! {
ChartColumnIncreasing {}
},
"Chart Column Increasing",
),
(
rsx! {
ChartColumnStacked {}
},
"Chart Column Stacked",
),
(
rsx! {
ChartGantt {}
},
"Chart Gantt",
),
(
rsx! {
ChartLine {}
},
"Chart Line",
),
(
rsx! {
ChartNetwork {}
},
"Chart Network",
),
(
rsx! {
ChartNoAxesColumn {}
},
"Chart No Axes Column",
),
(
rsx! {
ChartNoAxesColumnDecreasing {}
},
"Chart No Axes Column Decreasing",
),
(
rsx! {
ChartNoAxesColumnIncreasing {}
},
"Chart No Axes Column Increasing",
),
(
rsx! {
ChartNoAxesCombined {}
},
"Chart No Axes Combined",
),
(
rsx! {
ChartNoAxesGantt {}
},
"Chart No Axes Gantt",
),
(
rsx! {
ChartPie {}
},
"Chart Pie",
),
(
rsx! {
ChartScatter {}
},
"Chart Scatter",
),
(
rsx! {
ChartSpline {}
},
"Chart Spline",
),
(
rsx! {
Check {}
},
"Check",
),
(
rsx! {
CheckCheck {}
},
"Check Check",
),
(
rsx! {
ChefHat {}
},
"Chef Hat",
),
(
rsx! {
Cherry {}
},
"Cherry",
),
(
rsx! {
ChevronDown {}
},
"Chevron Down",
),
(
rsx! {
ChevronFirst {}
},
"Chevron First",
),
(
rsx! {
ChevronLast {}
},
"Chevron Last",
),
(
rsx! {
ChevronLeft {}
},
"Chevron Left",
),
(
rsx! {
ChevronRight {}
},
"Chevron Right",
),
(
rsx! {
ChevronUp {}
},
"Chevron Up",
),
(
rsx! {
ChevronsDown {}
},
"Chevrons Down",
),
(
rsx! {
ChevronsDownUp {}
},
"Chevrons Down Up",
),
(
rsx! {
ChevronsLeft {}
},
"Chevrons Left",
),
(
rsx! {
ChevronsLeftRight {}
},
"Chevrons Left Right",
),
(
rsx! {
ChevronsLeftRightEllipsis {}
},
"Chevrons Left Right Ellipsis",
),
(
rsx! {
ChevronsRight {}
},
"Chevrons Right",
),
(
rsx! {
ChevronsRightLeft {}
},
"Chevrons Right Left",
),
(
rsx! {
ChevronsUp {}
},
"Chevrons Up",
),
(
rsx! {
ChevronsUpDown {}
},
"Chevrons Up Down",
),
(
rsx! {
Chrome {}
},
"Chrome",
),
(
rsx! {
Church {}
},
"Church",
),
(
rsx! {
Cigarette {}
},
"Cigarette",
),
(
rsx! {
CigaretteOff {}
},
"Cigarette Off",
),
(
rsx! {
Circle {}
},
"Circle",
),
(
rsx! {
CircleAlert {}
},
"Circle Alert",
),
(
rsx! {
CircleArrowDown {}
},
"Circle Arrow Down",
),
(
rsx! {
CircleArrowLeft {}
},
"Circle Arrow Left",
),
(
rsx! {
CircleArrowOutDownLeft {}
},
"Circle Arrow Out Down Left",
),
(
rsx! {
CircleArrowOutDownRight {}
},
"Circle Arrow Out Down Right",
),
(
rsx! {
CircleArrowOutUpLeft {}
},
"Circle Arrow Out Up Left",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsC2() -> Element {
let icons = [
(
rsx! {
CircleArrowOutUpRight {}
},
"Circle Arrow Out Up Right",
),
(
rsx! {
CircleArrowRight {}
},
"Circle Arrow Right",
),
(
rsx! {
CircleArrowUp {}
},
"Circle Arrow Up",
),
(
rsx! {
CircleCheck {}
},
"Circle Check",
),
(
rsx! {
CircleCheckBig {}
},
"Circle Check Big",
),
(
rsx! {
CircleChevronDown {}
},
"Circle Chevron Down",
),
(
rsx! {
CircleChevronLeft {}
},
"Circle Chevron Left",
),
(
rsx! {
CircleChevronRight {}
},
"Circle Chevron Right",
),
(
rsx! {
CircleChevronUp {}
},
"Circle Chevron Up",
),
(
rsx! {
CircleDashed {}
},
"Circle Dashed",
),
(
rsx! {
CircleDivide {}
},
"Circle Divide",
),
(
rsx! {
CircleDollarSign {}
},
"Circle Dollar Sign",
),
(
rsx! {
CircleDot {}
},
"Circle Dot",
),
(
rsx! {
CircleDotDashed {}
},
"Circle Dot Dashed",
),
(
rsx! {
CircleEllipsis {}
},
"Circle Ellipsis",
),
(
rsx! {
CircleEqual {}
},
"Circle Equal",
),
(
rsx! {
CircleFadingArrowUp {}
},
"Circle Fading Arrow Up",
),
(
rsx! {
CircleFadingPlus {}
},
"Circle Fading Plus",
),
(
rsx! {
CircleGauge {}
},
"Circle Gauge",
),
(
rsx! {
CircleHelp {}
},
"Circle Help",
),
(
rsx! {
CircleMinus {}
},
"Circle Minus",
),
(
rsx! {
CircleOff {}
},
"Circle Off",
),
(
rsx! {
CircleParking {}
},
"Circle Parking",
),
(
rsx! {
CircleParkingOff {}
},
"Circle Parking Off",
),
(
rsx! {
CirclePause {}
},
"Circle Pause",
),
(
rsx! {
CirclePercent {}
},
"Circle Percent",
),
(
rsx! {
CirclePlay {}
},
"Circle Play",
),
(
rsx! {
CirclePlus {}
},
"Circle Plus",
),
(
rsx! {
CirclePower {}
},
"Circle Power",
),
(
rsx! {
CircleSlash {}
},
"Circle Slash",
),
(
rsx! {
CircleSlash2 {}
},
"Circle Slash 2",
),
(
rsx! {
CircleStop {}
},
"Circle Stop",
),
(
rsx! {
CircleUser {}
},
"Circle User",
),
(
rsx! {
CircleUserRound {}
},
"Circle User Round",
),
(
rsx! {
CircleX {}
},
"Circle X",
),
(
rsx! {
CircuitBoard {}
},
"Circuit Board",
),
(
rsx! {
Citrus {}
},
"Citrus",
),
(
rsx! {
Clapperboard {}
},
"Clapperboard",
),
(
rsx! {
Clipboard {}
},
"Clipboard",
),
(
rsx! {
ClipboardCheck {}
},
"Clipboard Check",
),
(
rsx! {
ClipboardCopy {}
},
"Clipboard Copy",
),
(
rsx! {
ClipboardList {}
},
"Clipboard List",
),
(
rsx! {
ClipboardMinus {}
},
"Clipboard Minus",
),
(
rsx! {
ClipboardPaste {}
},
"Clipboard Paste",
),
(
rsx! {
ClipboardPen {}
},
"Clipboard Pen",
),
(
rsx! {
ClipboardPenLine {}
},
"Clipboard Pen Line",
),
(
rsx! {
ClipboardPlus {}
},
"Clipboard Plus",
),
(
rsx! {
ClipboardType {}
},
"Clipboard Type",
),
(
rsx! {
ClipboardX {}
},
"Clipboard X",
),
(
rsx! {
Clock {}
},
"Clock",
),
(
rsx! {
Clock1 {}
},
"Clock 1",
),
(
rsx! {
Clock10 {}
},
"Clock 10",
),
(
rsx! {
Clock11 {}
},
"Clock 11",
),
(
rsx! {
Clock12 {}
},
"Clock 12",
),
(
rsx! {
Clock2 {}
},
"Clock 2",
),
(
rsx! {
Clock3 {}
},
"Clock 3",
),
(
rsx! {
Clock4 {}
},
"Clock 4",
),
(
rsx! {
Clock5 {}
},
"Clock 5",
),
(
rsx! {
Clock6 {}
},
"Clock 6",
),
(
rsx! {
Clock7 {}
},
"Clock 7",
),
(
rsx! {
Clock8 {}
},
"Clock 8",
),
(
rsx! {
Clock9 {}
},
"Clock 9",
),
(
rsx! {
ClockAlert {}
},
"Clock Alert",
),
(
rsx! {
ClockArrowDown {}
},
"Clock Arrow Down",
),
(
rsx! {
ClockArrowUp {}
},
"Clock Arrow Up",
),
(
rsx! {
Cloud {}
},
"Cloud",
),
(
rsx! {
CloudAlert {}
},
"Cloud Alert",
),
(
rsx! {
CloudCog {}
},
"Cloud Cog",
),
(
rsx! {
CloudDownload {}
},
"Cloud Download",
),
(
rsx! {
CloudDrizzle {}
},
"Cloud Drizzle",
),
(
rsx! {
CloudFog {}
},
"Cloud Fog",
),
(
rsx! {
CloudHail {}
},
"Cloud Hail",
),
(
rsx! {
CloudLightning {}
},
"Cloud Lightning",
),
(
rsx! {
CloudMoon {}
},
"Cloud Moon",
),
(
rsx! {
CloudMoonRain {}
},
"Cloud Moon Rain",
),
(
rsx! {
CloudOff {}
},
"Cloud Off",
),
(
rsx! {
CloudRain {}
},
"Cloud Rain",
),
(
rsx! {
CloudRainWind {}
},
"Cloud Rain Wind",
),
(
rsx! {
CloudSnow {}
},
"Cloud Snow",
),
(
rsx! {
CloudSun {}
},
"Cloud Sun",
),
(
rsx! {
CloudSunRain {}
},
"Cloud Sun Rain",
),
(
rsx! {
CloudUpload {}
},
"Cloud Upload",
),
(
rsx! {
Cloudy {}
},
"Cloudy",
),
(
rsx! {
Clover {}
},
"Clover",
),
(
rsx! {
Club {}
},
"Club",
),
(
rsx! {
Code {}
},
"Code",
),
(
rsx! {
CodeXml {}
},
"Code Xml",
),
(
rsx! {
Codepen {}
},
"Codepen",
),
(
rsx! {
Codesandbox {}
},
"Codesandbox",
),
(
rsx! {
Coffee {}
},
"Coffee",
),
(
rsx! {
Cog {}
},
"Cog",
),
(
rsx! {
Coins {}
},
"Coins",
),
(
rsx! {
Columns2 {}
},
"Columns 2",
),
(
rsx! {
Columns3 {}
},
"Columns 3",
),
(
rsx! {
Columns4 {}
},
"Columns 4",
),
(
rsx! {
Combine {}
},
"Combine",
),
(
rsx! {
Command {}
},
"Command",
),
(
rsx! {
Compass {}
},
"Compass",
),
(
rsx! {
Component {}
},
"Component",
),
(
rsx! {
Computer {}
},
"Computer",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsC3() -> Element {
let icons = [
(
rsx! {
ConciergeBell {}
},
"Concierge Bell",
),
(
rsx! {
Cone {}
},
"Cone",
),
(
rsx! {
Construction {}
},
"Construction",
),
(
rsx! {
Contact {}
},
"Contact",
),
(
rsx! {
ContactRound {}
},
"Contact Round",
),
(
rsx! {
Container {}
},
"Container",
),
(
rsx! {
Contrast {}
},
"Contrast",
),
(
rsx! {
Cookie {}
},
"Cookie",
),
(
rsx! {
CookingPot {}
},
"Cooking Pot",
),
(
rsx! {
Copy {}
},
"Copy",
),
(
rsx! {
CopyCheck {}
},
"Copy Check",
),
(
rsx! {
CopyMinus {}
},
"Copy Minus",
),
(
rsx! {
CopyPlus {}
},
"Copy Plus",
),
(
rsx! {
CopySlash {}
},
"Copy Slash",
),
(
rsx! {
CopyX {}
},
"Copy X",
),
(
rsx! {
Copyleft {}
},
"Copyleft",
),
(
rsx! {
Copyright {}
},
"Copyright",
),
(
rsx! {
CornerDownLeft {}
},
"Corner Down Left",
),
(
rsx! {
CornerDownRight {}
},
"Corner Down Right",
),
(
rsx! {
CornerLeftDown {}
},
"Corner Left Down",
),
(
rsx! {
CornerLeftUp {}
},
"Corner Left Up",
),
(
rsx! {
CornerRightDown {}
},
"Corner Right Down",
),
(
rsx! {
CornerRightUp {}
},
"Corner Right Up",
),
(
rsx! {
CornerUpLeft {}
},
"Corner Up Left",
),
(
rsx! {
CornerUpRight {}
},
"Corner Up Right",
),
(
rsx! {
Cpu {}
},
"Cpu",
),
(
rsx! {
CreativeCommons {}
},
"Creative Commons",
),
(
rsx! {
CreditCard {}
},
"Credit Card",
),
(
rsx! {
Croissant {}
},
"Croissant",
),
(
rsx! {
Crop {}
},
"Crop",
),
(
rsx! {
Cross {}
},
"Cross",
),
(
rsx! {
Crosshair {}
},
"Crosshair",
),
(
rsx! {
Crown {}
},
"Crown",
),
(
rsx! {
Cuboid {}
},
"Cuboid",
),
(
rsx! {
CupSoda {}
},
"Cup Soda",
),
(
rsx! {
Currency {}
},
"Currency",
),
(
rsx! {
Cylinder {}
},
"Cylinder",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsD1() -> Element {
let icons = [
(
rsx! {
Dam {}
},
"Dam",
),
(
rsx! {
Database {}
},
"Database",
),
(
rsx! {
DatabaseBackup {}
},
"Database Backup",
),
(
rsx! {
DatabaseZap {}
},
"Database Zap",
),
(
rsx! {
Delete {}
},
"Delete",
),
(
rsx! {
Dessert {}
},
"Dessert",
),
(
rsx! {
Diameter {}
},
"Diameter",
),
(
rsx! {
Diamond {}
},
"Diamond",
),
(
rsx! {
DiamondMinus {}
},
"Diamond Minus",
),
(
rsx! {
DiamondPercent {}
},
"Diamond Percent",
),
(
rsx! {
DiamondPlus {}
},
"Diamond Plus",
),
(
rsx! {
Dice1 {}
},
"Dice 1",
),
(
rsx! {
Dice2 {}
},
"Dice 2",
),
(
rsx! {
Dice3 {}
},
"Dice 3",
),
(
rsx! {
Dice4 {}
},
"Dice 4",
),
(
rsx! {
Dice5 {}
},
"Dice 5",
),
(
rsx! {
Dice6 {}
},
"Dice 6",
),
(
rsx! {
Dices {}
},
"Dices",
),
(
rsx! {
Diff {}
},
"Diff",
),
(
rsx! {
Disc {}
},
"Disc",
),
(
rsx! {
Disc2 {}
},
"Disc 2",
),
(
rsx! {
Disc3 {}
},
"Disc 3",
),
(
rsx! {
DiscAlbum {}
},
"Disc Album",
),
(
rsx! {
Divide {}
},
"Divide",
),
(
rsx! {
Dna {}
},
"Dna",
),
(
rsx! {
DnaOff {}
},
"Dna Off",
),
(
rsx! {
Dock {}
},
"Dock",
),
(
rsx! {
Dog {}
},
"Dog",
),
(
rsx! {
DollarSign {}
},
"Dollar Sign",
),
(
rsx! {
Donut {}
},
"Donut",
),
(
rsx! {
DoorClosed {}
},
"Door Closed",
),
(
rsx! {
DoorOpen {}
},
"Door Open",
),
(
rsx! {
Dot {}
},
"Dot",
),
(
rsx! {
Download {}
},
"Download",
),
(
rsx! {
DraftingCompass {}
},
"Drafting Compass",
),
(
rsx! {
Drama {}
},
"Drama",
),
(
rsx! {
Dribbble {}
},
"Dribbble",
),
(
rsx! {
Drill {}
},
"Drill",
),
(
rsx! {
Droplet {}
},
"Droplet",
),
(
rsx! {
DropletOff {}
},
"Droplet Off",
),
(
rsx! {
Droplets {}
},
"Droplets",
),
(
rsx! {
Drum {}
},
"Drum",
),
(
rsx! {
Drumstick {}
},
"Drumstick",
),
(
rsx! {
Dumbbell {}
},
"Dumbbell",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsE1() -> Element {
let icons = [
(
rsx! {
Ear {}
},
"Ear",
),
(
rsx! {
EarOff {}
},
"Ear Off",
),
(
rsx! {
Earth {}
},
"Earth",
),
(
rsx! {
EarthLock {}
},
"Earth Lock",
),
(
rsx! {
Eclipse {}
},
"Eclipse",
),
(
rsx! {
Egg {}
},
"Egg",
),
(
rsx! {
EggFried {}
},
"Egg Fried",
),
(
rsx! {
EggOff {}
},
"Egg Off",
),
(
rsx! {
Ellipsis {}
},
"Ellipsis",
),
(
rsx! {
EllipsisVertical {}
},
"Ellipsis Vertical",
),
(
rsx! {
Equal {}
},
"Equal",
),
(
rsx! {
EqualApproximately {}
},
"Equal Approximately",
),
(
rsx! {
EqualNot {}
},
"Equal Not",
),
(
rsx! {
Eraser {}
},
"Eraser",
),
(
rsx! {
EthernetPort {}
},
"Ethernet Port",
),
(
rsx! {
Euro {}
},
"Euro",
),
(
rsx! {
Expand {}
},
"Expand",
),
(
rsx! {
ExternalLink {}
},
"External Link",
),
(
rsx! {
Eye {}
},
"Eye",
),
(
rsx! {
EyeClosed {}
},
"Eye Closed",
),
(
rsx! {
EyeOff {}
},
"Eye Off",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsF1() -> Element {
let icons = [
(
rsx! {
Facebook {}
},
"Facebook",
),
(
rsx! {
Factory {}
},
"Factory",
),
(
rsx! {
Fan {}
},
"Fan",
),
(
rsx! {
FastForward {}
},
"Fast Forward",
),
(
rsx! {
Feather {}
},
"Feather",
),
(
rsx! {
Fence {}
},
"Fence",
),
(
rsx! {
FerrisWheel {}
},
"Ferris Wheel",
),
(
rsx! {
Figma {}
},
"Figma",
),
(
rsx! {
File {}
},
"File",
),
(
rsx! {
FileArchive {}
},
"File Archive",
),
(
rsx! {
FileAudio {}
},
"File Audio",
),
(
rsx! {
FileAudio2 {}
},
"File Audio 2",
),
(
rsx! {
FileAxis3D {}
},
"File Axis 3 D",
),
(
rsx! {
FileBadge {}
},
"File Badge",
),
(
rsx! {
FileBadge2 {}
},
"File Badge 2",
),
(
rsx! {
FileBox {}
},
"File Box",
),
(
rsx! {
FileChartColumn {}
},
"File Chart Column",
),
(
rsx! {
FileChartColumnIncreasing {}
},
"File Chart Column Increasing",
),
(
rsx! {
FileChartLine {}
},
"File Chart Line",
),
(
rsx! {
FileChartPie {}
},
"File Chart Pie",
),
(
rsx! {
FileCheck {}
},
"File Check",
),
(
rsx! {
FileCheck2 {}
},
"File Check 2",
),
(
rsx! {
FileClock {}
},
"File Clock",
),
(
rsx! {
FileCode {}
},
"File Code",
),
(
rsx! {
FileCode2 {}
},
"File Code 2",
),
(
rsx! {
FileCog {}
},
"File Cog",
),
(
rsx! {
FileDiff {}
},
"File Diff",
),
(
rsx! {
FileDigit {}
},
"File Digit",
),
(
rsx! {
FileDown {}
},
"File Down",
),
(
rsx! {
FileHeart {}
},
"File Heart",
),
(
rsx! {
FileImage {}
},
"File Image",
),
(
rsx! {
FileInput {}
},
"File Input",
),
(
rsx! {
FileJson {}
},
"File Json",
),
(
rsx! {
FileJson2 {}
},
"File Json 2",
),
(
rsx! {
FileKey {}
},
"File Key",
),
(
rsx! {
FileKey2 {}
},
"File Key 2",
),
(
rsx! {
FileLock {}
},
"File Lock",
),
(
rsx! {
FileLock2 {}
},
"File Lock 2",
),
(
rsx! {
FileMinus {}
},
"File Minus",
),
(
rsx! {
FileMinus2 {}
},
"File Minus 2",
),
(
rsx! {
FileMusic {}
},
"File Music",
),
(
rsx! {
FileOutput {}
},
"File Output",
),
(
rsx! {
FilePen {}
},
"File Pen",
),
(
rsx! {
FilePenLine {}
},
"File Pen Line",
),
(
rsx! {
FilePlus {}
},
"File Plus",
),
(
rsx! {
FilePlus2 {}
},
"File Plus 2",
),
(
rsx! {
FileQuestion {}
},
"File Question",
),
(
rsx! {
FileScan {}
},
"File Scan",
),
(
rsx! {
FileSearch {}
},
"File Search",
),
(
rsx! {
FileSearch2 {}
},
"File Search 2",
),
(
rsx! {
FileSliders {}
},
"File Sliders",
),
(
rsx! {
FileSpreadsheet {}
},
"File Spreadsheet",
),
(
rsx! {
FileStack {}
},
"File Stack",
),
(
rsx! {
FileSymlink {}
},
"File Symlink",
),
(
rsx! {
FileTerminal {}
},
"File Terminal",
),
(
rsx! {
FileText {}
},
"File Text",
),
(
rsx! {
FileType {}
},
"File Type",
),
(
rsx! {
FileType2 {}
},
"File Type 2",
),
(
rsx! {
FileUp {}
},
"File Up",
),
(
rsx! {
FileUser {}
},
"File User",
),
(
rsx! {
FileVideo {}
},
"File Video",
),
(
rsx! {
FileVideo2 {}
},
"File Video 2",
),
(
rsx! {
FileVolume {}
},
"File Volume",
),
(
rsx! {
FileVolume2 {}
},
"File Volume 2",
),
(
rsx! {
FileWarning {}
},
"File Warning",
),
(
rsx! {
FileX {}
},
"File X",
),
(
rsx! {
FileX2 {}
},
"File X 2",
),
(
rsx! {
Files {}
},
"Files",
),
(
rsx! {
Film {}
},
"Film",
),
(
rsx! {
Filter {}
},
"Filter",
),
(
rsx! {
FilterX {}
},
"Filter X",
),
(
rsx! {
Fingerprint {}
},
"Fingerprint",
),
(
rsx! {
FireExtinguisher {}
},
"Fire Extinguisher",
),
(
rsx! {
Fish {}
},
"Fish",
),
(
rsx! {
FishOff {}
},
"Fish Off",
),
(
rsx! {
FishSymbol {}
},
"Fish Symbol",
),
(
rsx! {
Flag {}
},
"Flag",
),
(
rsx! {
FlagOff {}
},
"Flag Off",
),
(
rsx! {
FlagTriangleLeft {}
},
"Flag Triangle Left",
),
(
rsx! {
FlagTriangleRight {}
},
"Flag Triangle Right",
),
(
rsx! {
Flame {}
},
"Flame",
),
(
rsx! {
FlameKindling {}
},
"Flame Kindling",
),
(
rsx! {
Flashlight {}
},
"Flashlight",
),
(
rsx! {
FlashlightOff {}
},
"Flashlight Off",
),
(
rsx! {
FlaskConical {}
},
"Flask Conical",
),
(
rsx! {
FlaskConicalOff {}
},
"Flask Conical Off",
),
(
rsx! {
FlaskRound {}
},
"Flask Round",
),
(
rsx! {
FlipHorizontal {}
},
"Flip Horizontal",
),
(
rsx! {
FlipHorizontal2 {}
},
"Flip Horizontal 2",
),
(
rsx! {
FlipVertical {}
},
"Flip Vertical",
),
(
rsx! {
FlipVertical2 {}
},
"Flip Vertical 2",
),
(
rsx! {
Flower {}
},
"Flower",
),
(
rsx! {
Flower2 {}
},
"Flower 2",
),
(
rsx! {
Focus {}
},
"Focus",
),
(
rsx! {
FoldHorizontal {}
},
"Fold Horizontal",
),
(
rsx! {
FoldVertical {}
},
"Fold Vertical",
),
(
rsx! {
Folder {}
},
"Folder",
),
(
rsx! {
FolderArchive {}
},
"Folder Archive",
),
(
rsx! {
FolderCheck {}
},
"Folder Check",
),
(
rsx! {
FolderClock {}
},
"Folder Clock",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsF2() -> Element {
let icons = [
(
rsx! {
FolderClosed {}
},
"Folder Closed",
),
(
rsx! {
FolderCode {}
},
"Folder Code",
),
(
rsx! {
FolderCog {}
},
"Folder Cog",
),
(
rsx! {
FolderDot {}
},
"Folder Dot",
),
(
rsx! {
FolderDown {}
},
"Folder Down",
),
(
rsx! {
FolderGit {}
},
"Folder Git",
),
(
rsx! {
FolderGit2 {}
},
"Folder Git 2",
),
(
rsx! {
FolderHeart {}
},
"Folder Heart",
),
(
rsx! {
FolderInput {}
},
"Folder Input",
),
(
rsx! {
FolderKanban {}
},
"Folder Kanban",
),
(
rsx! {
FolderKey {}
},
"Folder Key",
),
(
rsx! {
FolderLock {}
},
"Folder Lock",
),
(
rsx! {
FolderMinus {}
},
"Folder Minus",
),
(
rsx! {
FolderOpen {}
},
"Folder Open",
),
(
rsx! {
FolderOpenDot {}
},
"Folder Open Dot",
),
(
rsx! {
FolderOutput {}
},
"Folder Output",
),
(
rsx! {
FolderPen {}
},
"Folder Pen",
),
(
rsx! {
FolderPlus {}
},
"Folder Plus",
),
(
rsx! {
FolderRoot {}
},
"Folder Root",
),
(
rsx! {
FolderSearch {}
},
"Folder Search",
),
(
rsx! {
FolderSearch2 {}
},
"Folder Search 2",
),
(
rsx! {
FolderSymlink {}
},
"Folder Symlink",
),
(
rsx! {
FolderSync {}
},
"Folder Sync",
),
(
rsx! {
FolderTree {}
},
"Folder Tree",
),
(
rsx! {
FolderUp {}
},
"Folder Up",
),
(
rsx! {
FolderX {}
},
"Folder X",
),
(
rsx! {
Folders {}
},
"Folders",
),
(
rsx! {
Footprints {}
},
"Footprints",
),
(
rsx! {
Forklift {}
},
"Forklift",
),
(
rsx! {
Forward {}
},
"Forward",
),
(
rsx! {
Frame {}
},
"Frame",
),
(
rsx! {
Framer {}
},
"Framer",
),
(
rsx! {
Frown {}
},
"Frown",
),
(
rsx! {
Fuel {}
},
"Fuel",
),
(
rsx! {
Fullscreen {}
},
"Fullscreen",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsG1() -> Element {
let icons = [
(
rsx! {
GalleryHorizontal {}
},
"Gallery Horizontal",
),
(
rsx! {
GalleryHorizontalEnd {}
},
"Gallery Horizontal End",
),
(
rsx! {
GalleryThumbnails {}
},
"Gallery Thumbnails",
),
(
rsx! {
GalleryVertical {}
},
"Gallery Vertical",
),
(
rsx! {
GalleryVerticalEnd {}
},
"Gallery Vertical End",
),
(
rsx! {
Gamepad {}
},
"Gamepad",
),
(
rsx! {
Gamepad2 {}
},
"Gamepad 2",
),
(
rsx! {
Gauge {}
},
"Gauge",
),
(
rsx! {
Gavel {}
},
"Gavel",
),
(
rsx! {
Gem {}
},
"Gem",
),
(
rsx! {
Ghost {}
},
"Ghost",
),
(
rsx! {
Gift {}
},
"Gift",
),
(
rsx! {
GitBranch {}
},
"Git Branch",
),
(
rsx! {
GitBranchPlus {}
},
"Git Branch Plus",
),
(
rsx! {
GitCommitHorizontal {}
},
"Git Commit Horizontal",
),
(
rsx! {
GitCommitVertical {}
},
"Git Commit Vertical",
),
(
rsx! {
GitCompare {}
},
"Git Compare",
),
(
rsx! {
GitCompareArrows {}
},
"Git Compare Arrows",
),
(
rsx! {
GitFork {}
},
"Git Fork",
),
(
rsx! {
GitGraph {}
},
"Git Graph",
),
(
rsx! {
GitMerge {}
},
"Git Merge",
),
(
rsx! {
GitPullRequest {}
},
"Git Pull Request",
),
(
rsx! {
GitPullRequestArrow {}
},
"Git Pull Request Arrow",
),
(
rsx! {
GitPullRequestClosed {}
},
"Git Pull Request Closed",
),
(
rsx! {
GitPullRequestCreate {}
},
"Git Pull Request Create",
),
(
rsx! {
GitPullRequestCreateArrow {}
},
"Git Pull Request Create Arrow",
),
(
rsx! {
GitPullRequestDraft {}
},
"Git Pull Request Draft",
),
(
rsx! {
Github {}
},
"Github",
),
(
rsx! {
Gitlab {}
},
"Gitlab",
),
(
rsx! {
GlassWater {}
},
"Glass Water",
),
(
rsx! {
Glasses {}
},
"Glasses",
),
(
rsx! {
Globe {}
},
"Globe",
),
(
rsx! {
GlobeLock {}
},
"Globe Lock",
),
(
rsx! {
Goal {}
},
"Goal",
),
(
rsx! {
Grab {}
},
"Grab",
),
(
rsx! {
GraduationCap {}
},
"Graduation Cap",
),
(
rsx! {
Grape {}
},
"Grape",
),
(
rsx! {
Grid2X2 {}
},
"Grid 2 X 2",
),
(
rsx! {
Grid2X2Check {}
},
"Grid 2 X 2 Check",
),
(
rsx! {
Grid2X2Plus {}
},
"Grid 2 X 2 Plus",
),
(
rsx! {
Grid2X2X {}
},
"Grid 2 X 2 X",
),
(
rsx! {
Grid3X3 {}
},
"Grid 3 X 3",
),
(
rsx! {
Grip {}
},
"Grip",
),
(
rsx! {
GripHorizontal {}
},
"Grip Horizontal",
),
(
rsx! {
GripVertical {}
},
"Grip Vertical",
),
(
rsx! {
Group {}
},
"Group",
),
(
rsx! {
Guitar {}
},
"Guitar",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsH1() -> Element {
let icons = [
(
rsx! {
Ham {}
},
"Ham",
),
(
rsx! {
Hammer {}
},
"Hammer",
),
(
rsx! {
Hand {}
},
"Hand",
),
(
rsx! {
HandCoins {}
},
"Hand Coins",
),
(
rsx! {
HandHeart {}
},
"Hand Heart",
),
(
rsx! {
HandHelping {}
},
"Hand Helping",
),
(
rsx! {
HandMetal {}
},
"Hand Metal",
),
(
rsx! {
HandPlatter {}
},
"Hand Platter",
),
(
rsx! {
Handshake {}
},
"Handshake",
),
(
rsx! {
HardDrive {}
},
"Hard Drive",
),
(
rsx! {
HardDriveDownload {}
},
"Hard Drive Download",
),
(
rsx! {
HardDriveUpload {}
},
"Hard Drive Upload",
),
(
rsx! {
HardHat {}
},
"Hard Hat",
),
(
rsx! {
Hash {}
},
"Hash",
),
(
rsx! {
Haze {}
},
"Haze",
),
(
rsx! {
HdmiPort {}
},
"Hdmi Port",
),
(
rsx! {
Heading {}
},
"Heading",
),
(
rsx! {
Heading1 {}
},
"Heading 1",
),
(
rsx! {
Heading2 {}
},
"Heading 2",
),
(
rsx! {
Heading3 {}
},
"Heading 3",
),
(
rsx! {
Heading4 {}
},
"Heading 4",
),
(
rsx! {
Heading5 {}
},
"Heading 5",
),
(
rsx! {
Heading6 {}
},
"Heading 6",
),
(
rsx! {
HeadphoneOff {}
},
"Headphone Off",
),
(
rsx! {
Headphones {}
},
"Headphones",
),
(
rsx! {
Headset {}
},
"Headset",
),
(
rsx! {
Heart {}
},
"Heart",
),
(
rsx! {
HeartCrack {}
},
"Heart Crack",
),
(
rsx! {
HeartHandshake {}
},
"Heart Handshake",
),
(
rsx! {
HeartOff {}
},
"Heart Off",
),
(
rsx! {
HeartPulse {}
},
"Heart Pulse",
),
(
rsx! {
Heater {}
},
"Heater",
),
(
rsx! {
Hexagon {}
},
"Hexagon",
),
(
rsx! {
Highlighter {}
},
"Highlighter",
),
(
rsx! {
History {}
},
"History",
),
(
rsx! {
Hop {}
},
"Hop",
),
(
rsx! {
HopOff {}
},
"Hop Off",
),
(
rsx! {
Hospital {}
},
"Hospital",
),
(
rsx! {
Hotel {}
},
"Hotel",
),
(
rsx! {
Hourglass {}
},
"Hourglass",
),
(
rsx! {
House {}
},
"House",
),
(
rsx! {
HousePlug {}
},
"House Plug",
),
(
rsx! {
HousePlus {}
},
"House Plus",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsI1() -> Element {
let icons = [
(
rsx! {
IceCreamBowl {}
},
"Ice Cream Bowl",
),
(
rsx! {
IceCreamCone {}
},
"Ice Cream Cone",
),
(
rsx! {
IdCard {}
},
"Id Card",
),
(
rsx! {
Image {}
},
"Image",
),
(
rsx! {
ImageDown {}
},
"Image Down",
),
(
rsx! {
ImageMinus {}
},
"Image Minus",
),
(
rsx! {
ImageOff {}
},
"Image Off",
),
(
rsx! {
ImagePlay {}
},
"Image Play",
),
(
rsx! {
ImagePlus {}
},
"Image Plus",
),
(
rsx! {
ImageUp {}
},
"Image Up",
),
(
rsx! {
ImageUpscale {}
},
"Image Upscale",
),
(
rsx! {
Images {}
},
"Images",
),
(
rsx! {
Import {}
},
"Import",
),
(
rsx! {
Inbox {}
},
"Inbox",
),
(
rsx! {
IndentDecrease {}
},
"Indent Decrease",
),
(
rsx! {
IndentIncrease {}
},
"Indent Increase",
),
(
rsx! {
IndianRupee {}
},
"Indian Rupee",
),
(
rsx! {
Infinity {}
},
"Infinity",
),
(
rsx! {
Info {}
},
"Info",
),
(
rsx! {
InspectionPanel {}
},
"Inspection Panel",
),
(
rsx! {
Instagram {}
},
"Instagram",
),
(
rsx! {
Italic {}
},
"Italic",
),
(
rsx! {
IterationCcw {}
},
"Iteration Ccw",
),
(
rsx! {
IterationCw {}
},
"Iteration Cw",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsJ1() -> Element {
let icons = [
(
rsx! {
JapaneseYen {}
},
"Japanese Yen",
),
(
rsx! {
Joystick {}
},
"Joystick",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsK1() -> Element {
let icons = [
(
rsx! {
Kanban {}
},
"Kanban",
),
(
rsx! {
Key {}
},
"Key",
),
(
rsx! {
KeyRound {}
},
"Key Round",
),
(
rsx! {
KeySquare {}
},
"Key Square",
),
(
rsx! {
Keyboard {}
},
"Keyboard",
),
(
rsx! {
KeyboardMusic {}
},
"Keyboard Music",
),
(
rsx! {
KeyboardOff {}
},
"Keyboard Off",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsL1() -> Element {
let icons = [
(
rsx! {
Lamp {}
},
"Lamp",
),
(
rsx! {
LampCeiling {}
},
"Lamp Ceiling",
),
(
rsx! {
LampDesk {}
},
"Lamp Desk",
),
(
rsx! {
LampFloor {}
},
"Lamp Floor",
),
(
rsx! {
LampWallDown {}
},
"Lamp Wall Down",
),
(
rsx! {
LampWallUp {}
},
"Lamp Wall Up",
),
(
rsx! {
LandPlot {}
},
"Land Plot",
),
(
rsx! {
Landmark {}
},
"Landmark",
),
(
rsx! {
Languages {}
},
"Languages",
),
(
rsx! {
Laptop {}
},
"Laptop",
),
(
rsx! {
LaptopMinimal {}
},
"Laptop Minimal",
),
(
rsx! {
LaptopMinimalCheck {}
},
"Laptop Minimal Check",
),
(
rsx! {
Lasso {}
},
"Lasso",
),
(
rsx! {
LassoSelect {}
},
"Lasso Select",
),
(
rsx! {
Laugh {}
},
"Laugh",
),
(
rsx! {
Layers {}
},
"Layers",
),
(
rsx! {
Layers2 {}
},
"Layers 2",
),
(
rsx! {
LayoutDashboard {}
},
"Layout Dashboard",
),
(
rsx! {
LayoutGrid {}
},
"Layout Grid",
),
(
rsx! {
LayoutList {}
},
"Layout List",
),
(
rsx! {
LayoutPanelLeft {}
},
"Layout Panel Left",
),
(
rsx! {
LayoutPanelTop {}
},
"Layout Panel Top",
),
(
rsx! {
LayoutTemplate {}
},
"Layout Template",
),
(
rsx! {
Leaf {}
},
"Leaf",
),
(
rsx! {
LeafyGreen {}
},
"Leafy Green",
),
(
rsx! {
Lectern {}
},
"Lectern",
),
(
rsx! {
LetterText {}
},
"Letter Text",
),
(
rsx! {
Library {}
},
"Library",
),
(
rsx! {
LibraryBig {}
},
"Library Big",
),
(
rsx! {
LifeBuoy {}
},
"Life Buoy",
),
(
rsx! {
Ligature {}
},
"Ligature",
),
(
rsx! {
Lightbulb {}
},
"Lightbulb",
),
(
rsx! {
LightbulbOff {}
},
"Lightbulb Off",
),
(
rsx! {
Link {}
},
"Link",
),
(
rsx! {
Link2 {}
},
"Link 2",
),
(
rsx! {
Link2Off {}
},
"Link 2 Off",
),
(
rsx! {
Linkedin {}
},
"Linkedin",
),
(
rsx! {
List {}
},
"List",
),
(
rsx! {
ListCheck {}
},
"List Check",
),
(
rsx! {
ListChecks {}
},
"List Checks",
),
(
rsx! {
ListCollapse {}
},
"List Collapse",
),
(
rsx! {
ListEnd {}
},
"List End",
),
(
rsx! {
ListFilter {}
},
"List Filter",
),
(
rsx! {
ListFilterPlus {}
},
"List Filter Plus",
),
(
rsx! {
ListMinus {}
},
"List Minus",
),
(
rsx! {
ListMusic {}
},
"List Music",
),
(
rsx! {
ListOrdered {}
},
"List Ordered",
),
(
rsx! {
ListPlus {}
},
"List Plus",
),
(
rsx! {
ListRestart {}
},
"List Restart",
),
(
rsx! {
ListStart {}
},
"List Start",
),
(
rsx! {
ListTodo {}
},
"List Todo",
),
(
rsx! {
ListTree {}
},
"List Tree",
),
(
rsx! {
ListVideo {}
},
"List Video",
),
(
rsx! {
ListX {}
},
"List X",
),
(
rsx! {
Loader {}
},
"Loader",
),
(
rsx! {
LoaderCircle {}
},
"Loader Circle",
),
(
rsx! {
LoaderPinwheel {}
},
"Loader Pinwheel",
),
(
rsx! {
Locate {}
},
"Locate",
),
(
rsx! {
LocateFixed {}
},
"Locate Fixed",
),
(
rsx! {
LocateOff {}
},
"Locate Off",
),
(
rsx! {
Lock {}
},
"Lock",
),
(
rsx! {
LockKeyhole {}
},
"Lock Keyhole",
),
(
rsx! {
LockKeyholeOpen {}
},
"Lock Keyhole Open",
),
(
rsx! {
LockOpen {}
},
"Lock Open",
),
(
rsx! {
LogIn {}
},
"Log In",
),
(
rsx! {
LogOut {}
},
"Log Out",
),
(
rsx! {
Logs {}
},
"Logs",
),
(
rsx! {
Lollipop {}
},
"Lollipop",
),
(
rsx! {
Luggage {}
},
"Luggage",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsM1() -> Element {
let icons = [
(
rsx! {
Magnet {}
},
"Magnet",
),
(
rsx! {
Mail {}
},
"Mail",
),
(
rsx! {
MailCheck {}
},
"Mail Check",
),
(
rsx! {
MailMinus {}
},
"Mail Minus",
),
(
rsx! {
MailOpen {}
},
"Mail Open",
),
(
rsx! {
MailPlus {}
},
"Mail Plus",
),
(
rsx! {
MailQuestion {}
},
"Mail Question",
),
(
rsx! {
MailSearch {}
},
"Mail Search",
),
(
rsx! {
MailWarning {}
},
"Mail Warning",
),
(
rsx! {
MailX {}
},
"Mail X",
),
(
rsx! {
Mailbox {}
},
"Mailbox",
),
(
rsx! {
Mails {}
},
"Mails",
),
(
rsx! {
Map {}
},
"Map",
),
(
rsx! {
MapPin {}
},
"Map Pin",
),
(
rsx! {
MapPinCheck {}
},
"Map Pin Check",
),
(
rsx! {
MapPinCheckInside {}
},
"Map Pin Check Inside",
),
(
rsx! {
MapPinHouse {}
},
"Map Pin House",
),
(
rsx! {
MapPinMinus {}
},
"Map Pin Minus",
),
(
rsx! {
MapPinMinusInside {}
},
"Map Pin Minus Inside",
),
(
rsx! {
MapPinOff {}
},
"Map Pin Off",
),
(
rsx! {
MapPinPlus {}
},
"Map Pin Plus",
),
(
rsx! {
MapPinPlusInside {}
},
"Map Pin Plus Inside",
),
(
rsx! {
MapPinX {}
},
"Map Pin X",
),
(
rsx! {
MapPinXInside {}
},
"Map Pin X Inside",
),
(
rsx! {
MapPinned {}
},
"Map Pinned",
),
(
rsx! {
Martini {}
},
"Martini",
),
(
rsx! {
Maximize {}
},
"Maximize",
),
(
rsx! {
Maximize2 {}
},
"Maximize 2",
),
(
rsx! {
Medal {}
},
"Medal",
),
(
rsx! {
Megaphone {}
},
"Megaphone",
),
(
rsx! {
MegaphoneOff {}
},
"Megaphone Off",
),
(
rsx! {
Meh {}
},
"Meh",
),
(
rsx! {
MemoryStick {}
},
"Memory Stick",
),
(
rsx! {
Menu {}
},
"Menu",
),
(
rsx! {
Merge {}
},
"Merge",
),
(
rsx! {
MessageCircle {}
},
"Message Circle",
),
(
rsx! {
MessageCircleCode {}
},
"Message Circle Code",
),
(
rsx! {
MessageCircleDashed {}
},
"Message Circle Dashed",
),
(
rsx! {
MessageCircleHeart {}
},
"Message Circle Heart",
),
(
rsx! {
MessageCircleMore {}
},
"Message Circle More",
),
(
rsx! {
MessageCircleOff {}
},
"Message Circle Off",
),
(
rsx! {
MessageCirclePlus {}
},
"Message Circle Plus",
),
(
rsx! {
MessageCircleQuestion {}
},
"Message Circle Question",
),
(
rsx! {
MessageCircleReply {}
},
"Message Circle Reply",
),
(
rsx! {
MessageCircleWarning {}
},
"Message Circle Warning",
),
(
rsx! {
MessageCircleX {}
},
"Message Circle X",
),
(
rsx! {
MessageSquare {}
},
"Message Square",
),
(
rsx! {
MessageSquareCode {}
},
"Message Square Code",
),
(
rsx! {
MessageSquareDashed {}
},
"Message Square Dashed",
),
(
rsx! {
MessageSquareDiff {}
},
"Message Square Diff",
),
(
rsx! {
MessageSquareDot {}
},
"Message Square Dot",
),
(
rsx! {
MessageSquareHeart {}
},
"Message Square Heart",
),
(
rsx! {
MessageSquareLock {}
},
"Message Square Lock",
),
(
rsx! {
MessageSquareMore {}
},
"Message Square More",
),
(
rsx! {
MessageSquareOff {}
},
"Message Square Off",
),
(
rsx! {
MessageSquarePlus {}
},
"Message Square Plus",
),
(
rsx! {
MessageSquareQuote {}
},
"Message Square Quote",
),
(
rsx! {
MessageSquareReply {}
},
"Message Square Reply",
),
(
rsx! {
MessageSquareShare {}
},
"Message Square Share",
),
(
rsx! {
MessageSquareText {}
},
"Message Square Text",
),
(
rsx! {
MessageSquareWarning {}
},
"Message Square Warning",
),
(
rsx! {
MessageSquareX {}
},
"Message Square X",
),
(
rsx! {
MessagesSquare {}
},
"Messages Square",
),
(
rsx! {
Mic {}
},
"Mic",
),
(
rsx! {
MicOff {}
},
"Mic Off",
),
(
rsx! {
MicVocal {}
},
"Mic Vocal",
),
(
rsx! {
Microchip {}
},
"Microchip",
),
(
rsx! {
Microscope {}
},
"Microscope",
),
(
rsx! {
Microwave {}
},
"Microwave",
),
(
rsx! {
Milestone {}
},
"Milestone",
),
(
rsx! {
Milk {}
},
"Milk",
),
(
rsx! {
MilkOff {}
},
"Milk Off",
),
(
rsx! {
Minimize {}
},
"Minimize",
),
(
rsx! {
Minimize2 {}
},
"Minimize 2",
),
(
rsx! {
Minus {}
},
"Minus",
),
(
rsx! {
Monitor {}
},
"Monitor",
),
(
rsx! {
MonitorCheck {}
},
"Monitor Check",
),
(
rsx! {
MonitorCog {}
},
"Monitor Cog",
),
(
rsx! {
MonitorDot {}
},
"Monitor Dot",
),
(
rsx! {
MonitorDown {}
},
"Monitor Down",
),
(
rsx! {
MonitorOff {}
},
"Monitor Off",
),
(
rsx! {
MonitorPause {}
},
"Monitor Pause",
),
(
rsx! {
MonitorPlay {}
},
"Monitor Play",
),
(
rsx! {
MonitorSmartphone {}
},
"Monitor Smartphone",
),
(
rsx! {
MonitorSpeaker {}
},
"Monitor Speaker",
),
(
rsx! {
MonitorStop {}
},
"Monitor Stop",
),
(
rsx! {
MonitorUp {}
},
"Monitor Up",
),
(
rsx! {
MonitorX {}
},
"Monitor X",
),
(
rsx! {
Moon {}
},
"Moon",
),
(
rsx! {
MoonStar {}
},
"Moon Star",
),
(
rsx! {
Mountain {}
},
"Mountain",
),
(
rsx! {
MountainSnow {}
},
"Mountain Snow",
),
(
rsx! {
Mouse {}
},
"Mouse",
),
(
rsx! {
MouseOff {}
},
"Mouse Off",
),
(
rsx! {
MousePointer {}
},
"Mouse Pointer",
),
(
rsx! {
MousePointer2 {}
},
"Mouse Pointer 2",
),
(
rsx! {
MousePointerBan {}
},
"Mouse Pointer Ban",
),
(
rsx! {
MousePointerClick {}
},
"Mouse Pointer Click",
),
(
rsx! {
Move {}
},
"Move",
),
(
rsx! {
Move3D {}
},
"Move 3 D",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsM2() -> Element {
let icons = [
(
rsx! {
MoveDiagonal {}
},
"Move Diagonal",
),
(
rsx! {
MoveDiagonal2 {}
},
"Move Diagonal 2",
),
(
rsx! {
MoveDown {}
},
"Move Down",
),
(
rsx! {
MoveDownLeft {}
},
"Move Down Left",
),
(
rsx! {
MoveDownRight {}
},
"Move Down Right",
),
(
rsx! {
MoveHorizontal {}
},
"Move Horizontal",
),
(
rsx! {
MoveLeft {}
},
"Move Left",
),
(
rsx! {
MoveRight {}
},
"Move Right",
),
(
rsx! {
MoveUp {}
},
"Move Up",
),
(
rsx! {
MoveUpLeft {}
},
"Move Up Left",
),
(
rsx! {
MoveUpRight {}
},
"Move Up Right",
),
(
rsx! {
MoveVertical {}
},
"Move Vertical",
),
(
rsx! {
Music {}
},
"Music",
),
(
rsx! {
Music2 {}
},
"Music 2",
),
(
rsx! {
Music3 {}
},
"Music 3",
),
(
rsx! {
Music4 {}
},
"Music 4",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsN1() -> Element {
let icons = [
(
rsx! {
Navigation {}
},
"Navigation",
),
(
rsx! {
Navigation2 {}
},
"Navigation 2",
),
(
rsx! {
Navigation2Off {}
},
"Navigation 2 Off",
),
(
rsx! {
NavigationOff {}
},
"Navigation Off",
),
(
rsx! {
Network {}
},
"Network",
),
(
rsx! {
Newspaper {}
},
"Newspaper",
),
(
rsx! {
Nfc {}
},
"Nfc",
),
(
rsx! {
Notebook {}
},
"Notebook",
),
(
rsx! {
NotebookPen {}
},
"Notebook Pen",
),
(
rsx! {
NotebookTabs {}
},
"Notebook Tabs",
),
(
rsx! {
NotebookText {}
},
"Notebook Text",
),
(
rsx! {
NotepadText {}
},
"Notepad Text",
),
(
rsx! {
NotepadTextDashed {}
},
"Notepad Text Dashed",
),
(
rsx! {
Nut {}
},
"Nut",
),
(
rsx! {
NutOff {}
},
"Nut Off",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsO1() -> Element {
let icons = [
(
rsx! {
Octagon {}
},
"Octagon",
),
(
rsx! {
OctagonAlert {}
},
"Octagon Alert",
),
(
rsx! {
OctagonMinus {}
},
"Octagon Minus",
),
(
rsx! {
OctagonPause {}
},
"Octagon Pause",
),
(
rsx! {
OctagonX {}
},
"Octagon X",
),
(
rsx! {
Omega {}
},
"Omega",
),
(
rsx! {
Option {}
},
"Option",
),
(
rsx! {
Orbit {}
},
"Orbit",
),
(
rsx! {
Origami {}
},
"Origami",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsP1() -> Element {
let icons = [
(
rsx! {
Package {}
},
"Package",
),
(
rsx! {
Package2 {}
},
"Package 2",
),
(
rsx! {
PackageCheck {}
},
"Package Check",
),
(
rsx! {
PackageMinus {}
},
"Package Minus",
),
(
rsx! {
PackageOpen {}
},
"Package Open",
),
(
rsx! {
PackagePlus {}
},
"Package Plus",
),
(
rsx! {
PackageSearch {}
},
"Package Search",
),
(
rsx! {
PackageX {}
},
"Package X",
),
(
rsx! {
PaintBucket {}
},
"Paint Bucket",
),
(
rsx! {
PaintRoller {}
},
"Paint Roller",
),
(
rsx! {
Paintbrush {}
},
"Paintbrush",
),
(
rsx! {
PaintbrushVertical {}
},
"Paintbrush Vertical",
),
(
rsx! {
Palette {}
},
"Palette",
),
(
rsx! {
PanelBottom {}
},
"Panel Bottom",
),
(
rsx! {
PanelBottomClose {}
},
"Panel Bottom Close",
),
(
rsx! {
PanelBottomDashed {}
},
"Panel Bottom Dashed",
),
(
rsx! {
PanelBottomOpen {}
},
"Panel Bottom Open",
),
(
rsx! {
PanelLeft {}
},
"Panel Left",
),
(
rsx! {
PanelLeftClose {}
},
"Panel Left Close",
),
(
rsx! {
PanelLeftDashed {}
},
"Panel Left Dashed",
),
(
rsx! {
PanelLeftOpen {}
},
"Panel Left Open",
),
(
rsx! {
PanelRight {}
},
"Panel Right",
),
(
rsx! {
PanelRightClose {}
},
"Panel Right Close",
),
(
rsx! {
PanelRightDashed {}
},
"Panel Right Dashed",
),
(
rsx! {
PanelRightOpen {}
},
"Panel Right Open",
),
(
rsx! {
PanelTop {}
},
"Panel Top",
),
(
rsx! {
PanelTopClose {}
},
"Panel Top Close",
),
(
rsx! {
PanelTopDashed {}
},
"Panel Top Dashed",
),
(
rsx! {
PanelTopOpen {}
},
"Panel Top Open",
),
(
rsx! {
PanelsLeftBottom {}
},
"Panels Left Bottom",
),
(
rsx! {
PanelsRightBottom {}
},
"Panels Right Bottom",
),
(
rsx! {
PanelsTopLeft {}
},
"Panels Top Left",
),
(
rsx! {
Paperclip {}
},
"Paperclip",
),
(
rsx! {
Parentheses {}
},
"Parentheses",
),
(
rsx! {
ParkingMeter {}
},
"Parking Meter",
),
(
rsx! {
PartyPopper {}
},
"Party Popper",
),
(
rsx! {
Pause {}
},
"Pause",
),
(
rsx! {
PawPrint {}
},
"Paw Print",
),
(
rsx! {
PcCase {}
},
"Pc Case",
),
(
rsx! {
Pen {}
},
"Pen",
),
(
rsx! {
PenLine {}
},
"Pen Line",
),
(
rsx! {
PenOff {}
},
"Pen Off",
),
(
rsx! {
PenTool {}
},
"Pen Tool",
),
(
rsx! {
Pencil {}
},
"Pencil",
),
(
rsx! {
PencilLine {}
},
"Pencil Line",
),
(
rsx! {
PencilOff {}
},
"Pencil Off",
),
(
rsx! {
PencilRuler {}
},
"Pencil Ruler",
),
(
rsx! {
Pentagon {}
},
"Pentagon",
),
(
rsx! {
Percent {}
},
"Percent",
),
(
rsx! {
PersonStanding {}
},
"Person Standing",
),
(
rsx! {
PhilippinePeso {}
},
"Philippine Peso",
),
(
rsx! {
Phone {}
},
"Phone",
),
(
rsx! {
PhoneCall {}
},
"Phone Call",
),
(
rsx! {
PhoneForwarded {}
},
"Phone Forwarded",
),
(
rsx! {
PhoneIncoming {}
},
"Phone Incoming",
),
(
rsx! {
PhoneMissed {}
},
"Phone Missed",
),
(
rsx! {
PhoneOff {}
},
"Phone Off",
),
(
rsx! {
PhoneOutgoing {}
},
"Phone Outgoing",
),
(
rsx! {
Pi {}
},
"Pi",
),
(
rsx! {
Piano {}
},
"Piano",
),
(
rsx! {
Pickaxe {}
},
"Pickaxe",
),
(
rsx! {
PictureInPicture {}
},
"Picture In Picture",
),
(
rsx! {
PictureInPicture2 {}
},
"Picture In Picture 2",
),
(
rsx! {
PiggyBank {}
},
"Piggy Bank",
),
(
rsx! {
Pilcrow {}
},
"Pilcrow",
),
(
rsx! {
PilcrowLeft {}
},
"Pilcrow Left",
),
(
rsx! {
PilcrowRight {}
},
"Pilcrow Right",
),
(
rsx! {
Pill {}
},
"Pill",
),
(
rsx! {
PillBottle {}
},
"Pill Bottle",
),
(
rsx! {
Pin {}
},
"Pin",
),
(
rsx! {
PinOff {}
},
"Pin Off",
),
(
rsx! {
Pipette {}
},
"Pipette",
),
(
rsx! {
Pizza {}
},
"Pizza",
),
(
rsx! {
Plane {}
},
"Plane",
),
(
rsx! {
PlaneLanding {}
},
"Plane Landing",
),
(
rsx! {
PlaneTakeoff {}
},
"Plane Takeoff",
),
(
rsx! {
Play {}
},
"Play",
),
(
rsx! {
Plug {}
},
"Plug",
),
(
rsx! {
Plug2 {}
},
"Plug 2",
),
(
rsx! {
PlugZap {}
},
"Plug Zap",
),
(
rsx! {
Plus {}
},
"Plus",
),
(
rsx! {
Pocket {}
},
"Pocket",
),
(
rsx! {
PocketKnife {}
},
"Pocket Knife",
),
(
rsx! {
Podcast {}
},
"Podcast",
),
(
rsx! {
Pointer {}
},
"Pointer",
),
(
rsx! {
PointerOff {}
},
"Pointer Off",
),
(
rsx! {
Popcorn {}
},
"Popcorn",
),
(
rsx! {
Popsicle {}
},
"Popsicle",
),
(
rsx! {
PoundSterling {}
},
"Pound Sterling",
),
(
rsx! {
Power {}
},
"Power",
),
(
rsx! {
PowerOff {}
},
"Power Off",
),
(
rsx! {
Presentation {}
},
"Presentation",
),
(
rsx! {
Printer {}
},
"Printer",
),
(
rsx! {
PrinterCheck {}
},
"Printer Check",
),
(
rsx! {
Projector {}
},
"Projector",
),
(
rsx! {
Proportions {}
},
"Proportions",
),
(
rsx! {
Puzzle {}
},
"Puzzle",
),
(
rsx! {
Pyramid {}
},
"Pyramid",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsQ1() -> Element {
let icons = [
(
rsx! {
QrCode {}
},
"Qr Code",
),
(
rsx! {
Quote {}
},
"Quote",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsR1() -> Element {
let icons = [
(
rsx! {
Rabbit {}
},
"Rabbit",
),
(
rsx! {
Radar {}
},
"Radar",
),
(
rsx! {
Radiation {}
},
"Radiation",
),
(
rsx! {
Radical {}
},
"Radical",
),
(
rsx! {
Radio {}
},
"Radio",
),
(
rsx! {
RadioReceiver {}
},
"Radio Receiver",
),
(
rsx! {
RadioTower {}
},
"Radio Tower",
),
(
rsx! {
Radius {}
},
"Radius",
),
(
rsx! {
RailSymbol {}
},
"Rail Symbol",
),
(
rsx! {
Rainbow {}
},
"Rainbow",
),
(
rsx! {
Rat {}
},
"Rat",
),
(
rsx! {
Ratio {}
},
"Ratio",
),
(
rsx! {
Receipt {}
},
"Receipt",
),
(
rsx! {
ReceiptCent {}
},
"Receipt Cent",
),
(
rsx! {
ReceiptEuro {}
},
"Receipt Euro",
),
(
rsx! {
ReceiptIndianRupee {}
},
"Receipt Indian Rupee",
),
(
rsx! {
ReceiptJapaneseYen {}
},
"Receipt Japanese Yen",
),
(
rsx! {
ReceiptPoundSterling {}
},
"Receipt Pound Sterling",
),
(
rsx! {
ReceiptRussianRuble {}
},
"Receipt Russian Ruble",
),
(
rsx! {
ReceiptSwissFranc {}
},
"Receipt Swiss Franc",
),
(
rsx! {
ReceiptText {}
},
"Receipt Text",
),
(
rsx! {
RectangleEllipsis {}
},
"Rectangle Ellipsis",
),
(
rsx! {
RectangleHorizontal {}
},
"Rectangle Horizontal",
),
(
rsx! {
RectangleVertical {}
},
"Rectangle Vertical",
),
(
rsx! {
Recycle {}
},
"Recycle",
),
(
rsx! {
Redo {}
},
"Redo",
),
(
rsx! {
Redo2 {}
},
"Redo 2",
),
(
rsx! {
RedoDot {}
},
"Redo Dot",
),
(
rsx! {
RefreshCcw {}
},
"Refresh Ccw",
),
(
rsx! {
RefreshCcwDot {}
},
"Refresh Ccw Dot",
),
(
rsx! {
RefreshCw {}
},
"Refresh Cw",
),
(
rsx! {
RefreshCwOff {}
},
"Refresh Cw Off",
),
(
rsx! {
Refrigerator {}
},
"Refrigerator",
),
(
rsx! {
Regex {}
},
"Regex",
),
(
rsx! {
RemoveFormatting {}
},
"Remove Formatting",
),
(
rsx! {
Repeat {}
},
"Repeat",
),
(
rsx! {
Repeat1 {}
},
"Repeat 1",
),
(
rsx! {
Repeat2 {}
},
"Repeat 2",
),
(
rsx! {
Replace {}
},
"Replace",
),
(
rsx! {
ReplaceAll {}
},
"Replace All",
),
(
rsx! {
Reply {}
},
"Reply",
),
(
rsx! {
ReplyAll {}
},
"Reply All",
),
(
rsx! {
Rewind {}
},
"Rewind",
),
(
rsx! {
Ribbon {}
},
"Ribbon",
),
(
rsx! {
Rocket {}
},
"Rocket",
),
(
rsx! {
RockingChair {}
},
"Rocking Chair",
),
(
rsx! {
RollerCoaster {}
},
"Roller Coaster",
),
(
rsx! {
Rotate3D {}
},
"Rotate 3 D",
),
(
rsx! {
RotateCcw {}
},
"Rotate Ccw",
),
(
rsx! {
RotateCcwSquare {}
},
"Rotate Ccw Square",
),
(
rsx! {
RotateCw {}
},
"Rotate Cw",
),
(
rsx! {
RotateCwSquare {}
},
"Rotate Cw Square",
),
(
rsx! {
Route {}
},
"Route",
),
(
rsx! {
RouteOff {}
},
"Route Off",
),
(
rsx! {
Router {}
},
"Router",
),
(
rsx! {
Rows2 {}
},
"Rows 2",
),
(
rsx! {
Rows3 {}
},
"Rows 3",
),
(
rsx! {
Rows4 {}
},
"Rows 4",
),
(
rsx! {
Rss {}
},
"Rss",
),
(
rsx! {
Ruler {}
},
"Ruler",
),
(
rsx! {
RussianRuble {}
},
"Russian Ruble",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsS1() -> Element {
let icons = [
(
rsx! {
Sailboat {}
},
"Sailboat",
),
(
rsx! {
Salad {}
},
"Salad",
),
(
rsx! {
Sandwich {}
},
"Sandwich",
),
(
rsx! {
Satellite {}
},
"Satellite",
),
(
rsx! {
SatelliteDish {}
},
"Satellite Dish",
),
(
rsx! {
Save {}
},
"Save",
),
(
rsx! {
SaveAll {}
},
"Save All",
),
(
rsx! {
SaveOff {}
},
"Save Off",
),
(
rsx! {
Scale {}
},
"Scale",
),
(
rsx! {
Scale3D {}
},
"Scale 3 D",
),
(
rsx! {
Scaling {}
},
"Scaling",
),
(
rsx! {
Scan {}
},
"Scan",
),
(
rsx! {
ScanBarcode {}
},
"Scan Barcode",
),
(
rsx! {
ScanEye {}
},
"Scan Eye",
),
(
rsx! {
ScanFace {}
},
"Scan Face",
),
(
rsx! {
ScanHeart {}
},
"Scan Heart",
),
(
rsx! {
ScanLine {}
},
"Scan Line",
),
(
rsx! {
ScanQrCode {}
},
"Scan Qr Code",
),
(
rsx! {
ScanSearch {}
},
"Scan Search",
),
(
rsx! {
ScanText {}
},
"Scan Text",
),
(
rsx! {
School {}
},
"School",
),
(
rsx! {
Scissors {}
},
"Scissors",
),
(
rsx! {
ScissorsLineDashed {}
},
"Scissors Line Dashed",
),
(
rsx! {
ScreenShare {}
},
"Screen Share",
),
(
rsx! {
ScreenShareOff {}
},
"Screen Share Off",
),
(
rsx! {
Scroll {}
},
"Scroll",
),
(
rsx! {
ScrollText {}
},
"Scroll Text",
),
(
rsx! {
Search {}
},
"Search",
),
(
rsx! {
SearchCheck {}
},
"Search Check",
),
(
rsx! {
SearchCode {}
},
"Search Code",
),
(
rsx! {
SearchSlash {}
},
"Search Slash",
),
(
rsx! {
SearchX {}
},
"Search X",
),
(
rsx! {
Section {}
},
"Section",
),
(
rsx! {
Send {}
},
"Send",
),
(
rsx! {
SendHorizontal {}
},
"Send Horizontal",
),
(
rsx! {
SendToBack {}
},
"Send To Back",
),
(
rsx! {
SeparatorHorizontal {}
},
"Separator Horizontal",
),
(
rsx! {
SeparatorVertical {}
},
"Separator Vertical",
),
(
rsx! {
Server {}
},
"Server",
),
(
rsx! {
ServerCog {}
},
"Server Cog",
),
(
rsx! {
ServerCrash {}
},
"Server Crash",
),
(
rsx! {
ServerOff {}
},
"Server Off",
),
(
rsx! {
Settings {}
},
"Settings",
),
(
rsx! {
Settings2 {}
},
"Settings 2",
),
(
rsx! {
Shapes {}
},
"Shapes",
),
(
rsx! {
Share {}
},
"Share",
),
(
rsx! {
Share2 {}
},
"Share 2",
),
(
rsx! {
Sheet {}
},
"Sheet",
),
(
rsx! {
Shell {}
},
"Shell",
),
(
rsx! {
Shield {}
},
"Shield",
),
(
rsx! {
ShieldAlert {}
},
"Shield Alert",
),
(
rsx! {
ShieldBan {}
},
"Shield Ban",
),
(
rsx! {
ShieldCheck {}
},
"Shield Check",
),
(
rsx! {
ShieldEllipsis {}
},
"Shield Ellipsis",
),
(
rsx! {
ShieldHalf {}
},
"Shield Half",
),
(
rsx! {
ShieldMinus {}
},
"Shield Minus",
),
(
rsx! {
ShieldOff {}
},
"Shield Off",
),
(
rsx! {
ShieldPlus {}
},
"Shield Plus",
),
(
rsx! {
ShieldQuestion {}
},
"Shield Question",
),
(
rsx! {
ShieldX {}
},
"Shield X",
),
(
rsx! {
Ship {}
},
"Ship",
),
(
rsx! {
ShipWheel {}
},
"Ship Wheel",
),
(
rsx! {
Shirt {}
},
"Shirt",
),
(
rsx! {
ShoppingBag {}
},
"Shopping Bag",
),
(
rsx! {
ShoppingBasket {}
},
"Shopping Basket",
),
(
rsx! {
ShoppingCart {}
},
"Shopping Cart",
),
(
rsx! {
Shovel {}
},
"Shovel",
),
(
rsx! {
ShowerHead {}
},
"Shower Head",
),
(
rsx! {
Shrink {}
},
"Shrink",
),
(
rsx! {
Shrub {}
},
"Shrub",
),
(
rsx! {
Shuffle {}
},
"Shuffle",
),
(
rsx! {
Sigma {}
},
"Sigma",
),
(
rsx! {
Signal {}
},
"Signal",
),
(
rsx! {
SignalHigh {}
},
"Signal High",
),
(
rsx! {
SignalLow {}
},
"Signal Low",
),
(
rsx! {
SignalMedium {}
},
"Signal Medium",
),
(
rsx! {
SignalZero {}
},
"Signal Zero",
),
(
rsx! {
Signature {}
},
"Signature",
),
(
rsx! {
Signpost {}
},
"Signpost",
),
(
rsx! {
SignpostBig {}
},
"Signpost Big",
),
(
rsx! {
Siren {}
},
"Siren",
),
(
rsx! {
SkipBack {}
},
"Skip Back",
),
(
rsx! {
SkipForward {}
},
"Skip Forward",
),
(
rsx! {
Skull {}
},
"Skull",
),
(
rsx! {
Slack {}
},
"Slack",
),
(
rsx! {
Slash {}
},
"Slash",
),
(
rsx! {
Slice {}
},
"Slice",
),
(
rsx! {
SlidersHorizontal {}
},
"Sliders Horizontal",
),
(
rsx! {
SlidersVertical {}
},
"Sliders Vertical",
),
(
rsx! {
Smartphone {}
},
"Smartphone",
),
(
rsx! {
SmartphoneCharging {}
},
"Smartphone Charging",
),
(
rsx! {
SmartphoneNfc {}
},
"Smartphone Nfc",
),
(
rsx! {
Smile {}
},
"Smile",
),
(
rsx! {
SmilePlus {}
},
"Smile Plus",
),
(
rsx! {
Snail {}
},
"Snail",
),
(
rsx! {
Snowflake {}
},
"Snowflake",
),
(
rsx! {
Sofa {}
},
"Sofa",
),
(
rsx! {
Soup {}
},
"Soup",
),
(
rsx! {
Space {}
},
"Space",
),
(
rsx! {
Spade {}
},
"Spade",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsS2() -> Element {
let icons = [
(
rsx! {
Sparkle {}
},
"Sparkle",
),
(
rsx! {
Sparkles {}
},
"Sparkles",
),
(
rsx! {
Speaker {}
},
"Speaker",
),
(
rsx! {
Speech {}
},
"Speech",
),
(
rsx! {
SpellCheck {}
},
"Spell Check",
),
(
rsx! {
SpellCheck2 {}
},
"Spell Check 2",
),
(
rsx! {
Spline {}
},
"Spline",
),
(
rsx! {
Split {}
},
"Split",
),
(
rsx! {
SprayCan {}
},
"Spray Can",
),
(
rsx! {
Sprout {}
},
"Sprout",
),
(
rsx! {
Square {}
},
"Square",
),
(
rsx! {
SquareActivity {}
},
"Square Activity",
),
(
rsx! {
SquareArrowDown {}
},
"Square Arrow Down",
),
(
rsx! {
SquareArrowDownLeft {}
},
"Square Arrow Down Left",
),
(
rsx! {
SquareArrowDownRight {}
},
"Square Arrow Down Right",
),
(
rsx! {
SquareArrowLeft {}
},
"Square Arrow Left",
),
(
rsx! {
SquareArrowOutDownLeft {}
},
"Square Arrow Out Down Left",
),
(
rsx! {
SquareArrowOutDownRight {}
},
"Square Arrow Out Down Right",
),
(
rsx! {
SquareArrowOutUpLeft {}
},
"Square Arrow Out Up Left",
),
(
rsx! {
SquareArrowOutUpRight {}
},
"Square Arrow Out Up Right",
),
(
rsx! {
SquareArrowRight {}
},
"Square Arrow Right",
),
(
rsx! {
SquareArrowUp {}
},
"Square Arrow Up",
),
(
rsx! {
SquareArrowUpLeft {}
},
"Square Arrow Up Left",
),
(
rsx! {
SquareArrowUpRight {}
},
"Square Arrow Up Right",
),
(
rsx! {
SquareAsterisk {}
},
"Square Asterisk",
),
(
rsx! {
SquareBottomDashedScissors {}
},
"Square Bottom Dashed Scissors",
),
(
rsx! {
SquareChartGantt {}
},
"Square Chart Gantt",
),
(
rsx! {
SquareCheck {}
},
"Square Check",
),
(
rsx! {
SquareCheckBig {}
},
"Square Check Big",
),
(
rsx! {
SquareChevronDown {}
},
"Square Chevron Down",
),
(
rsx! {
SquareChevronLeft {}
},
"Square Chevron Left",
),
(
rsx! {
SquareChevronRight {}
},
"Square Chevron Right",
),
(
rsx! {
SquareChevronUp {}
},
"Square Chevron Up",
),
(
rsx! {
SquareCode {}
},
"Square Code",
),
(
rsx! {
SquareDashed {}
},
"Square Dashed",
),
(
rsx! {
SquareDashedBottom {}
},
"Square Dashed Bottom",
),
(
rsx! {
SquareDashedBottomCode {}
},
"Square Dashed Bottom Code",
),
(
rsx! {
SquareDashedKanban {}
},
"Square Dashed Kanban",
),
(
rsx! {
SquareDashedMousePointer {}
},
"Square Dashed Mouse Pointer",
),
(
rsx! {
SquareDivide {}
},
"Square Divide",
),
(
rsx! {
SquareDot {}
},
"Square Dot",
),
(
rsx! {
SquareEqual {}
},
"Square Equal",
),
(
rsx! {
SquareFunction {}
},
"Square Function",
),
(
rsx! {
SquareKanban {}
},
"Square Kanban",
),
(
rsx! {
SquareLibrary {}
},
"Square Library",
),
(
rsx! {
SquareM {}
},
"Square M",
),
(
rsx! {
SquareMenu {}
},
"Square Menu",
),
(
rsx! {
SquareMinus {}
},
"Square Minus",
),
(
rsx! {
SquareMousePointer {}
},
"Square Mouse Pointer",
),
(
rsx! {
SquareParking {}
},
"Square Parking",
),
(
rsx! {
SquareParkingOff {}
},
"Square Parking Off",
),
(
rsx! {
SquarePen {}
},
"Square Pen",
),
(
rsx! {
SquarePercent {}
},
"Square Percent",
),
(
rsx! {
SquarePi {}
},
"Square Pi",
),
(
rsx! {
SquarePilcrow {}
},
"Square Pilcrow",
),
(
rsx! {
SquarePlay {}
},
"Square Play",
),
(
rsx! {
SquarePlus {}
},
"Square Plus",
),
(
rsx! {
SquarePower {}
},
"Square Power",
),
(
rsx! {
SquareRadical {}
},
"Square Radical",
),
(
rsx! {
SquareScissors {}
},
"Square Scissors",
),
(
rsx! {
SquareSigma {}
},
"Square Sigma",
),
(
rsx! {
SquareSlash {}
},
"Square Slash",
),
(
rsx! {
SquareSplitHorizontal {}
},
"Square Split Horizontal",
),
(
rsx! {
SquareSplitVertical {}
},
"Square Split Vertical",
),
(
rsx! {
SquareSquare {}
},
"Square Square",
),
(
rsx! {
SquareStack {}
},
"Square Stack",
),
(
rsx! {
SquareTerminal {}
},
"Square Terminal",
),
(
rsx! {
SquareUser {}
},
"Square User",
),
(
rsx! {
SquareUserRound {}
},
"Square User Round",
),
(
rsx! {
SquareX {}
},
"Square X",
),
(
rsx! {
Squircle {}
},
"Squircle",
),
(
rsx! {
Squirrel {}
},
"Squirrel",
),
(
rsx! {
Stamp {}
},
"Stamp",
),
(
rsx! {
Star {}
},
"Star",
),
(
rsx! {
StarHalf {}
},
"Star Half",
),
(
rsx! {
StarOff {}
},
"Star Off",
),
(
rsx! {
StepBack {}
},
"Step Back",
),
(
rsx! {
StepForward {}
},
"Step Forward",
),
(
rsx! {
Stethoscope {}
},
"Stethoscope",
),
(
rsx! {
Sticker {}
},
"Sticker",
),
(
rsx! {
StickyNote {}
},
"Sticky Note",
),
(
rsx! {
Store {}
},
"Store",
),
(
rsx! {
StretchHorizontal {}
},
"Stretch Horizontal",
),
(
rsx! {
StretchVertical {}
},
"Stretch Vertical",
),
(
rsx! {
Strikethrough {}
},
"Strikethrough",
),
(
rsx! {
Subscript {}
},
"Subscript",
),
(
rsx! {
Sun {}
},
"Sun",
),
(
rsx! {
SunDim {}
},
"Sun Dim",
),
(
rsx! {
SunMedium {}
},
"Sun Medium",
),
(
rsx! {
SunMoon {}
},
"Sun Moon",
),
(
rsx! {
SunSnow {}
},
"Sun Snow",
),
(
rsx! {
Sunrise {}
},
"Sunrise",
),
(
rsx! {
Sunset {}
},
"Sunset",
),
(
rsx! {
Superscript {}
},
"Superscript",
),
(
rsx! {
SwatchBook {}
},
"Swatch Book",
),
(
rsx! {
SwissFranc {}
},
"Swiss Franc",
),
(
rsx! {
SwitchCamera {}
},
"Switch Camera",
),
(
rsx! {
Sword {}
},
"Sword",
),
(
rsx! {
Swords {}
},
"Swords",
),
(
rsx! {
Syringe {}
},
"Syringe",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsT1() -> Element {
let icons = [
(
rsx! {
Table {}
},
"Table",
),
(
rsx! {
Table2 {}
},
"Table 2",
),
(
rsx! {
TableCellsMerge {}
},
"Table Cells Merge",
),
(
rsx! {
TableCellsSplit {}
},
"Table Cells Split",
),
(
rsx! {
TableColumnsSplit {}
},
"Table Columns Split",
),
(
rsx! {
TableOfContents {}
},
"Table Of Contents",
),
(
rsx! {
TableProperties {}
},
"Table Properties",
),
(
rsx! {
TableRowsSplit {}
},
"Table Rows Split",
),
(
rsx! {
Tablet {}
},
"Tablet",
),
(
rsx! {
TabletSmartphone {}
},
"Tablet Smartphone",
),
(
rsx! {
Tablets {}
},
"Tablets",
),
(
rsx! {
Tag {}
},
"Tag",
),
(
rsx! {
Tags {}
},
"Tags",
),
(
rsx! {
Tally1 {}
},
"Tally 1",
),
(
rsx! {
Tally2 {}
},
"Tally 2",
),
(
rsx! {
Tally3 {}
},
"Tally 3",
),
(
rsx! {
Tally4 {}
},
"Tally 4",
),
(
rsx! {
Tally5 {}
},
"Tally 5",
),
(
rsx! {
Tangent {}
},
"Tangent",
),
(
rsx! {
Target {}
},
"Target",
),
(
rsx! {
Telescope {}
},
"Telescope",
),
(
rsx! {
Tent {}
},
"Tent",
),
(
rsx! {
TentTree {}
},
"Tent Tree",
),
(
rsx! {
Terminal {}
},
"Terminal",
),
(
rsx! {
TestTube {}
},
"Test Tube",
),
(
rsx! {
TestTubeDiagonal {}
},
"Test Tube Diagonal",
),
(
rsx! {
TestTubes {}
},
"Test Tubes",
),
(
rsx! {
Text {}
},
"Text",
),
(
rsx! {
TextCursor {}
},
"Text Cursor",
),
(
rsx! {
TextCursorInput {}
},
"Text Cursor Input",
),
(
rsx! {
TextQuote {}
},
"Text Quote",
),
(
rsx! {
TextSearch {}
},
"Text Search",
),
(
rsx! {
TextSelect {}
},
"Text Select",
),
(
rsx! {
Theater {}
},
"Theater",
),
(
rsx! {
Thermometer {}
},
"Thermometer",
),
(
rsx! {
ThermometerSnowflake {}
},
"Thermometer Snowflake",
),
(
rsx! {
ThermometerSun {}
},
"Thermometer Sun",
),
(
rsx! {
ThumbsDown {}
},
"Thumbs Down",
),
(
rsx! {
ThumbsUp {}
},
"Thumbs Up",
),
(
rsx! {
Ticket {}
},
"Ticket",
),
(
rsx! {
TicketCheck {}
},
"Ticket Check",
),
(
rsx! {
TicketMinus {}
},
"Ticket Minus",
),
(
rsx! {
TicketPercent {}
},
"Ticket Percent",
),
(
rsx! {
TicketPlus {}
},
"Ticket Plus",
),
(
rsx! {
TicketSlash {}
},
"Ticket Slash",
),
(
rsx! {
TicketX {}
},
"Ticket X",
),
(
rsx! {
Tickets {}
},
"Tickets",
),
(
rsx! {
TicketsPlane {}
},
"Tickets Plane",
),
(
rsx! {
Timer {}
},
"Timer",
),
(
rsx! {
TimerOff {}
},
"Timer Off",
),
(
rsx! {
TimerReset {}
},
"Timer Reset",
),
(
rsx! {
ToggleLeft {}
},
"Toggle Left",
),
(
rsx! {
ToggleRight {}
},
"Toggle Right",
),
(
rsx! {
Toilet {}
},
"Toilet",
),
(
rsx! {
Tornado {}
},
"Tornado",
),
(
rsx! {
Torus {}
},
"Torus",
),
(
rsx! {
Touchpad {}
},
"Touchpad",
),
(
rsx! {
TouchpadOff {}
},
"Touchpad Off",
),
(
rsx! {
TowerControl {}
},
"Tower Control",
),
(
rsx! {
ToyBrick {}
},
"Toy Brick",
),
(
rsx! {
Tractor {}
},
"Tractor",
),
(
rsx! {
TrafficCone {}
},
"Traffic Cone",
),
(
rsx! {
TrainFront {}
},
"Train Front",
),
(
rsx! {
TrainFrontTunnel {}
},
"Train Front Tunnel",
),
(
rsx! {
TrainTrack {}
},
"Train Track",
),
(
rsx! {
TramFront {}
},
"Tram Front",
),
(
rsx! {
Trash {}
},
"Trash",
),
(
rsx! {
Trash2 {}
},
"Trash 2",
),
(
rsx! {
TreeDeciduous {}
},
"Tree Deciduous",
),
(
rsx! {
TreePalm {}
},
"Tree Palm",
),
(
rsx! {
TreePine {}
},
"Tree Pine",
),
(
rsx! {
Trees {}
},
"Trees",
),
(
rsx! {
Trello {}
},
"Trello",
),
(
rsx! {
TrendingDown {}
},
"Trending Down",
),
(
rsx! {
TrendingUp {}
},
"Trending Up",
),
(
rsx! {
TrendingUpDown {}
},
"Trending Up Down",
),
(
rsx! {
Triangle {}
},
"Triangle",
),
(
rsx! {
TriangleAlert {}
},
"Triangle Alert",
),
(
rsx! {
TriangleRight {}
},
"Triangle Right",
),
(
rsx! {
Trophy {}
},
"Trophy",
),
(
rsx! {
Truck {}
},
"Truck",
),
(
rsx! {
Turtle {}
},
"Turtle",
),
(
rsx! {
Tv {}
},
"Tv",
),
(
rsx! {
TvMinimal {}
},
"Tv Minimal",
),
(
rsx! {
TvMinimalPlay {}
},
"Tv Minimal Play",
),
(
rsx! {
Twitch {}
},
"Twitch",
),
(
rsx! {
Twitter {}
},
"Twitter",
),
(
rsx! {
Type {}
},
"Type",
),
(
rsx! {
TypeOutline {}
},
"Type Outline",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsU1() -> Element {
let icons = [
(
rsx! {
Umbrella {}
},
"Umbrella",
),
(
rsx! {
UmbrellaOff {}
},
"Umbrella Off",
),
(
rsx! {
Underline {}
},
"Underline",
),
(
rsx! {
Undo {}
},
"Undo",
),
(
rsx! {
Undo2 {}
},
"Undo 2",
),
(
rsx! {
UndoDot {}
},
"Undo Dot",
),
(
rsx! {
UnfoldHorizontal {}
},
"Unfold Horizontal",
),
(
rsx! {
UnfoldVertical {}
},
"Unfold Vertical",
),
(
rsx! {
Ungroup {}
},
"Ungroup",
),
(
rsx! {
University {}
},
"University",
),
(
rsx! {
Unlink {}
},
"Unlink",
),
(
rsx! {
Unlink2 {}
},
"Unlink 2",
),
(
rsx! {
Unplug {}
},
"Unplug",
),
(
rsx! {
Upload {}
},
"Upload",
),
(
rsx! {
Usb {}
},
"Usb",
),
(
rsx! {
User {}
},
"User",
),
(
rsx! {
UserCheck {}
},
"User Check",
),
(
rsx! {
UserCog {}
},
"User Cog",
),
(
rsx! {
UserMinus {}
},
"User Minus",
),
(
rsx! {
UserPen {}
},
"User Pen",
),
(
rsx! {
UserPlus {}
},
"User Plus",
),
(
rsx! {
UserRound {}
},
"User Round",
),
(
rsx! {
UserRoundCheck {}
},
"User Round Check",
),
(
rsx! {
UserRoundCog {}
},
"User Round Cog",
),
(
rsx! {
UserRoundMinus {}
},
"User Round Minus",
),
(
rsx! {
UserRoundPen {}
},
"User Round Pen",
),
(
rsx! {
UserRoundPlus {}
},
"User Round Plus",
),
(
rsx! {
UserRoundSearch {}
},
"User Round Search",
),
(
rsx! {
UserRoundX {}
},
"User Round X",
),
(
rsx! {
UserSearch {}
},
"User Search",
),
(
rsx! {
UserX {}
},
"User X",
),
(
rsx! {
Users {}
},
"Users",
),
(
rsx! {
UsersRound {}
},
"Users Round",
),
(
rsx! {
Utensils {}
},
"Utensils",
),
(
rsx! {
UtensilsCrossed {}
},
"Utensils Crossed",
),
(
rsx! {
UtilityPole {}
},
"Utility Pole",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsV1() -> Element {
let icons = [
(
rsx! {
Variable {}
},
"Variable",
),
(
rsx! {
Vault {}
},
"Vault",
),
(
rsx! {
Vegan {}
},
"Vegan",
),
(
rsx! {
VenetianMask {}
},
"Venetian Mask",
),
(
rsx! {
Vibrate {}
},
"Vibrate",
),
(
rsx! {
VibrateOff {}
},
"Vibrate Off",
),
(
rsx! {
Video {}
},
"Video",
),
(
rsx! {
VideoOff {}
},
"Video Off",
),
(
rsx! {
Videotape {}
},
"Videotape",
),
(
rsx! {
View {}
},
"View",
),
(
rsx! {
Voicemail {}
},
"Voicemail",
),
(
rsx! {
Volleyball {}
},
"Volleyball",
),
(
rsx! {
Volume {}
},
"Volume",
),
(
rsx! {
Volume1 {}
},
"Volume 1",
),
(
rsx! {
Volume2 {}
},
"Volume 2",
),
(
rsx! {
VolumeOff {}
},
"Volume Off",
),
(
rsx! {
VolumeX {}
},
"Volume X",
),
(
rsx! {
Vote {}
},
"Vote",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsW1() -> Element {
let icons = [
(
rsx! {
Wallet {}
},
"Wallet",
),
(
rsx! {
WalletCards {}
},
"Wallet Cards",
),
(
rsx! {
WalletMinimal {}
},
"Wallet Minimal",
),
(
rsx! {
Wallpaper {}
},
"Wallpaper",
),
(
rsx! {
Wand {}
},
"Wand",
),
(
rsx! {
WandSparkles {}
},
"Wand Sparkles",
),
(
rsx! {
Warehouse {}
},
"Warehouse",
),
(
rsx! {
WashingMachine {}
},
"Washing Machine",
),
(
rsx! {
Watch {}
},
"Watch",
),
(
rsx! {
Waves {}
},
"Waves",
),
(
rsx! {
WavesLadder {}
},
"Waves Ladder",
),
(
rsx! {
Waypoints {}
},
"Waypoints",
),
(
rsx! {
Webcam {}
},
"Webcam",
),
(
rsx! {
Webhook {}
},
"Webhook",
),
(
rsx! {
WebhookOff {}
},
"Webhook Off",
),
(
rsx! {
Weight {}
},
"Weight",
),
(
rsx! {
Wheat {}
},
"Wheat",
),
(
rsx! {
WheatOff {}
},
"Wheat Off",
),
(
rsx! {
WholeWord {}
},
"Whole Word",
),
(
rsx! {
Wifi {}
},
"Wifi",
),
(
rsx! {
WifiHigh {}
},
"Wifi High",
),
(
rsx! {
WifiLow {}
},
"Wifi Low",
),
(
rsx! {
WifiOff {}
},
"Wifi Off",
),
(
rsx! {
WifiZero {}
},
"Wifi Zero",
),
(
rsx! {
Wind {}
},
"Wind",
),
(
rsx! {
WindArrowDown {}
},
"Wind Arrow Down",
),
(
rsx! {
Wine {}
},
"Wine",
),
(
rsx! {
WineOff {}
},
"Wine Off",
),
(
rsx! {
Workflow {}
},
"Workflow",
),
(
rsx! {
Worm {}
},
"Worm",
),
(
rsx! {
WrapText {}
},
"Wrap Text",
),
(
rsx! {
Wrench {}
},
"Wrench",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsX1() -> Element {
let icons = [(
rsx! {
X {}
},
"X",
)];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsY1() -> Element {
let icons = [(
rsx! {
Youtube {}
},
"Youtube",
)];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsZ1() -> Element {
let icons = [
(
rsx! {
Zap {}
},
"Zap",
),
(
rsx! {
ZapOff {}
},
"Zap Off",
),
(
rsx! {
ZoomIn {}
},
"Zoom In",
),
(
rsx! {
ZoomOut {}
},
"Zoom Out",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm",
{icon}
span { {name} }
}
}
}
}
Lucide Leptos
Implementation of the Lucide icon library for Leptos applications.
Installation
Install the icons from your command line.
cargo add lucide-leptos
Usage
use leptos::prelude::*;
use lucide_leptos::Camera;
#[component]
fn App() -> impl IntoView {
view! {
<Camera color="red" size=48 />
}
}Props
| Name | Type | Default |
|---|---|---|
size | Signal<usize> | 24 |
color | Signal<String> | "currentColor" |
fill | Signal<String> | "none" |
stroke_width | Signal<usize> | 2 |
absolute_stroke_width | Signal<bool> | false |
Icons
use leptos::prelude::*;
use lucide_leptos::*;
#[component]
pub fn Icons() -> impl IntoView {
view! {
<div class="w-full max-w-80 py-4">
<IconsA />
<IconsB />
<IconsC />
<IconsD />
<IconsE />
<IconsF />
<IconsG />
<IconsH />
<IconsI />
<IconsJ />
<IconsK />
<IconsL />
<IconsM />
<IconsN />
<IconsO />
<IconsP />
<IconsQ />
<IconsR />
<IconsS />
<IconsT />
<IconsU />
<IconsV />
<IconsW />
<IconsX />
<IconsY />
<IconsZ />
</div>
}
}
#[component]
pub fn IconsA() -> impl IntoView {
view! {
<For
each=move || [
(view! { <AArrowDown /> }.into_any(), "A Arrow Down"),
(view! { <AArrowUp /> }.into_any(), "A Arrow Up"),
(view! { <ALargeSmall /> }.into_any(), "A Large Small"),
(view! { <Accessibility /> }.into_any(), "Accessibility"),
(view! { <Activity /> }.into_any(), "Activity"),
(view! { <AirVent /> }.into_any(), "Air Vent"),
(view! { <Airplay /> }.into_any(), "Airplay"),
(view! { <AlarmClock /> }.into_any(), "Alarm Clock"),
(view! { <AlarmClockCheck /> }.into_any(), "Alarm Clock Check"),
(view! { <AlarmClockMinus /> }.into_any(), "Alarm Clock Minus"),
(view! { <AlarmClockOff /> }.into_any(), "Alarm Clock Off"),
(view! { <AlarmClockPlus /> }.into_any(), "Alarm Clock Plus"),
(view! { <AlarmSmoke /> }.into_any(), "Alarm Smoke"),
(view! { <Album /> }.into_any(), "Album"),
(view! { <AlignCenter /> }.into_any(), "Align Center"),
(view! { <AlignCenterHorizontal /> }.into_any(), "Align Center Horizontal"),
(view! { <AlignCenterVertical /> }.into_any(), "Align Center Vertical"),
(view! { <AlignEndHorizontal /> }.into_any(), "Align End Horizontal"),
(view! { <AlignEndVertical /> }.into_any(), "Align End Vertical"),
(
view! { <AlignHorizontalDistributeCenter /> }.into_any(),
"Align Horizontal Distribute Center",
),
(
view! { <AlignHorizontalDistributeEnd /> }.into_any(),
"Align Horizontal Distribute End",
),
(
view! { <AlignHorizontalDistributeStart /> }.into_any(),
"Align Horizontal Distribute Start",
),
(
view! { <AlignHorizontalJustifyCenter /> }.into_any(),
"Align Horizontal Justify Center",
),
(
view! { <AlignHorizontalJustifyEnd /> }.into_any(),
"Align Horizontal Justify End",
),
(
view! { <AlignHorizontalJustifyStart /> }.into_any(),
"Align Horizontal Justify Start",
),
(
view! { <AlignHorizontalSpaceAround /> }.into_any(),
"Align Horizontal Space Around",
),
(
view! { <AlignHorizontalSpaceBetween /> }.into_any(),
"Align Horizontal Space Between",
),
(view! { <AlignJustify /> }.into_any(), "Align Justify"),
(view! { <AlignLeft /> }.into_any(), "Align Left"),
(view! { <AlignRight /> }.into_any(), "Align Right"),
(view! { <AlignStartHorizontal /> }.into_any(), "Align Start Horizontal"),
(view! { <AlignStartVertical /> }.into_any(), "Align Start Vertical"),
(
view! { <AlignVerticalDistributeCenter /> }.into_any(),
"Align Vertical Distribute Center",
),
(
view! { <AlignVerticalDistributeEnd /> }.into_any(),
"Align Vertical Distribute End",
),
(
view! { <AlignVerticalDistributeStart /> }.into_any(),
"Align Vertical Distribute Start",
),
(
view! { <AlignVerticalJustifyCenter /> }.into_any(),
"Align Vertical Justify Center",
),
(view! { <AlignVerticalJustifyEnd /> }.into_any(), "Align Vertical Justify End"),
(
view! { <AlignVerticalJustifyStart /> }.into_any(),
"Align Vertical Justify Start",
),
(view! { <AlignVerticalSpaceAround /> }.into_any(), "Align Vertical Space Around"),
(
view! { <AlignVerticalSpaceBetween /> }.into_any(),
"Align Vertical Space Between",
),
(view! { <Ambulance /> }.into_any(), "Ambulance"),
(view! { <Ampersand /> }.into_any(), "Ampersand"),
(view! { <Ampersands /> }.into_any(), "Ampersands"),
(view! { <Amphora /> }.into_any(), "Amphora"),
(view! { <Anchor /> }.into_any(), "Anchor"),
(view! { <Angry /> }.into_any(), "Angry"),
(view! { <Annoyed /> }.into_any(), "Annoyed"),
(view! { <Antenna /> }.into_any(), "Antenna"),
(view! { <Anvil /> }.into_any(), "Anvil"),
(view! { <Aperture /> }.into_any(), "Aperture"),
(view! { <AppWindow /> }.into_any(), "App Window"),
(view! { <AppWindowMac /> }.into_any(), "App Window Mac"),
(view! { <Apple /> }.into_any(), "Apple"),
(view! { <Archive /> }.into_any(), "Archive"),
(view! { <ArchiveRestore /> }.into_any(), "Archive Restore"),
(view! { <ArchiveX /> }.into_any(), "Archive X"),
(view! { <Armchair /> }.into_any(), "Armchair"),
(view! { <ArrowBigDown /> }.into_any(), "Arrow Big Down"),
(view! { <ArrowBigDownDash /> }.into_any(), "Arrow Big Down Dash"),
(view! { <ArrowBigLeft /> }.into_any(), "Arrow Big Left"),
(view! { <ArrowBigLeftDash /> }.into_any(), "Arrow Big Left Dash"),
(view! { <ArrowBigRight /> }.into_any(), "Arrow Big Right"),
(view! { <ArrowBigRightDash /> }.into_any(), "Arrow Big Right Dash"),
(view! { <ArrowBigUp /> }.into_any(), "Arrow Big Up"),
(view! { <ArrowBigUpDash /> }.into_any(), "Arrow Big Up Dash"),
(view! { <ArrowDown /> }.into_any(), "Arrow Down"),
(view! { <ArrowDown01 /> }.into_any(), "Arrow Down 01"),
(view! { <ArrowDown10 /> }.into_any(), "Arrow Down 10"),
(view! { <ArrowDownAZ /> }.into_any(), "Arrow Down Az"),
(view! { <ArrowDownFromLine /> }.into_any(), "Arrow Down From Line"),
(view! { <ArrowDownLeft /> }.into_any(), "Arrow Down Left"),
(view! { <ArrowDownNarrowWide /> }.into_any(), "Arrow Down Narrow Wide"),
(view! { <ArrowDownRight /> }.into_any(), "Arrow Down Right"),
(view! { <ArrowDownToDot /> }.into_any(), "Arrow Down To Dot"),
(view! { <ArrowDownToLine /> }.into_any(), "Arrow Down To Line"),
(view! { <ArrowDownUp /> }.into_any(), "Arrow Down Up"),
(view! { <ArrowDownWideNarrow /> }.into_any(), "Arrow Down Wide Narrow"),
(view! { <ArrowDownZA /> }.into_any(), "Arrow Down Za"),
(view! { <ArrowLeft /> }.into_any(), "Arrow Left"),
(view! { <ArrowLeftFromLine /> }.into_any(), "Arrow Left From Line"),
(view! { <ArrowLeftRight /> }.into_any(), "Arrow Left Right"),
(view! { <ArrowLeftToLine /> }.into_any(), "Arrow Left To Line"),
(view! { <ArrowRight /> }.into_any(), "Arrow Right"),
(view! { <ArrowRightFromLine /> }.into_any(), "Arrow Right From Line"),
(view! { <ArrowRightLeft /> }.into_any(), "Arrow Right Left"),
(view! { <ArrowRightToLine /> }.into_any(), "Arrow Right To Line"),
(view! { <ArrowUp /> }.into_any(), "Arrow Up"),
(view! { <ArrowUp01 /> }.into_any(), "Arrow Up 01"),
(view! { <ArrowUp10 /> }.into_any(), "Arrow Up 10"),
(view! { <ArrowUpAZ /> }.into_any(), "Arrow Up Az"),
(view! { <ArrowUpDown /> }.into_any(), "Arrow Up Down"),
(view! { <ArrowUpFromDot /> }.into_any(), "Arrow Up From Dot"),
(view! { <ArrowUpFromLine /> }.into_any(), "Arrow Up From Line"),
(view! { <ArrowUpLeft /> }.into_any(), "Arrow Up Left"),
(view! { <ArrowUpNarrowWide /> }.into_any(), "Arrow Up Narrow Wide"),
(view! { <ArrowUpRight /> }.into_any(), "Arrow Up Right"),
(view! { <ArrowUpToLine /> }.into_any(), "Arrow Up To Line"),
(view! { <ArrowUpWideNarrow /> }.into_any(), "Arrow Up Wide Narrow"),
(view! { <ArrowUpZA /> }.into_any(), "Arrow Up Za"),
(view! { <ArrowsUpFromLine /> }.into_any(), "Arrows Up From Line"),
(view! { <Asterisk /> }.into_any(), "Asterisk"),
(view! { <AtSign /> }.into_any(), "At Sign"),
(view! { <Atom /> }.into_any(), "Atom"),
(view! { <AudioLines /> }.into_any(), "Audio Lines"),
(view! { <AudioWaveform /> }.into_any(), "Audio Waveform"),
(view! { <Award /> }.into_any(), "Award"),
(view! { <Axe /> }.into_any(), "Axe"),
(view! { <Axis3D /> }.into_any(), "Axis 3 D"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsB() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Baby /> }.into_any(), "Baby"),
(view! { <Backpack /> }.into_any(), "Backpack"),
(view! { <Badge /> }.into_any(), "Badge"),
(view! { <BadgeAlert /> }.into_any(), "Badge Alert"),
(view! { <BadgeCent /> }.into_any(), "Badge Cent"),
(view! { <BadgeCheck /> }.into_any(), "Badge Check"),
(view! { <BadgeDollarSign /> }.into_any(), "Badge Dollar Sign"),
(view! { <BadgeEuro /> }.into_any(), "Badge Euro"),
(view! { <BadgeHelp /> }.into_any(), "Badge Help"),
(view! { <BadgeIndianRupee /> }.into_any(), "Badge Indian Rupee"),
(view! { <BadgeInfo /> }.into_any(), "Badge Info"),
(view! { <BadgeJapaneseYen /> }.into_any(), "Badge Japanese Yen"),
(view! { <BadgeMinus /> }.into_any(), "Badge Minus"),
(view! { <BadgePercent /> }.into_any(), "Badge Percent"),
(view! { <BadgePlus /> }.into_any(), "Badge Plus"),
(view! { <BadgePoundSterling /> }.into_any(), "Badge Pound Sterling"),
(view! { <BadgeRussianRuble /> }.into_any(), "Badge Russian Ruble"),
(view! { <BadgeSwissFranc /> }.into_any(), "Badge Swiss Franc"),
(view! { <BadgeX /> }.into_any(), "Badge X"),
(view! { <BaggageClaim /> }.into_any(), "Baggage Claim"),
(view! { <Ban /> }.into_any(), "Ban"),
(view! { <Banana /> }.into_any(), "Banana"),
(view! { <Bandage /> }.into_any(), "Bandage"),
(view! { <Banknote /> }.into_any(), "Banknote"),
(view! { <Barcode /> }.into_any(), "Barcode"),
(view! { <Baseline /> }.into_any(), "Baseline"),
(view! { <Bath /> }.into_any(), "Bath"),
(view! { <Battery /> }.into_any(), "Battery"),
(view! { <BatteryCharging /> }.into_any(), "Battery Charging"),
(view! { <BatteryFull /> }.into_any(), "Battery Full"),
(view! { <BatteryLow /> }.into_any(), "Battery Low"),
(view! { <BatteryMedium /> }.into_any(), "Battery Medium"),
(view! { <BatteryWarning /> }.into_any(), "Battery Warning"),
(view! { <Beaker /> }.into_any(), "Beaker"),
(view! { <Bean /> }.into_any(), "Bean"),
(view! { <BeanOff /> }.into_any(), "Bean Off"),
(view! { <Bed /> }.into_any(), "Bed"),
(view! { <BedDouble /> }.into_any(), "Bed Double"),
(view! { <BedSingle /> }.into_any(), "Bed Single"),
(view! { <Beef /> }.into_any(), "Beef"),
(view! { <Beer /> }.into_any(), "Beer"),
(view! { <BeerOff /> }.into_any(), "Beer Off"),
(view! { <Bell /> }.into_any(), "Bell"),
(view! { <BellDot /> }.into_any(), "Bell Dot"),
(view! { <BellElectric /> }.into_any(), "Bell Electric"),
(view! { <BellMinus /> }.into_any(), "Bell Minus"),
(view! { <BellOff /> }.into_any(), "Bell Off"),
(view! { <BellPlus /> }.into_any(), "Bell Plus"),
(view! { <BellRing /> }.into_any(), "Bell Ring"),
(view! { <BetweenHorizontalEnd /> }.into_any(), "Between Horizontal End"),
(view! { <BetweenHorizontalStart /> }.into_any(), "Between Horizontal Start"),
(view! { <BetweenVerticalEnd /> }.into_any(), "Between Vertical End"),
(view! { <BetweenVerticalStart /> }.into_any(), "Between Vertical Start"),
(view! { <BicepsFlexed /> }.into_any(), "Biceps Flexed"),
(view! { <Bike /> }.into_any(), "Bike"),
(view! { <Binary /> }.into_any(), "Binary"),
(view! { <Binoculars /> }.into_any(), "Binoculars"),
(view! { <Biohazard /> }.into_any(), "Biohazard"),
(view! { <Bird /> }.into_any(), "Bird"),
(view! { <Bitcoin /> }.into_any(), "Bitcoin"),
(view! { <Blend /> }.into_any(), "Blend"),
(view! { <Blinds /> }.into_any(), "Blinds"),
(view! { <Blocks /> }.into_any(), "Blocks"),
(view! { <Bluetooth /> }.into_any(), "Bluetooth"),
(view! { <BluetoothConnected /> }.into_any(), "Bluetooth Connected"),
(view! { <BluetoothOff /> }.into_any(), "Bluetooth Off"),
(view! { <BluetoothSearching /> }.into_any(), "Bluetooth Searching"),
(view! { <Bold /> }.into_any(), "Bold"),
(view! { <Bolt /> }.into_any(), "Bolt"),
(view! { <Bomb /> }.into_any(), "Bomb"),
(view! { <Bone /> }.into_any(), "Bone"),
(view! { <Book /> }.into_any(), "Book"),
(view! { <BookA /> }.into_any(), "Book A"),
(view! { <BookAudio /> }.into_any(), "Book Audio"),
(view! { <BookCheck /> }.into_any(), "Book Check"),
(view! { <BookCopy /> }.into_any(), "Book Copy"),
(view! { <BookDashed /> }.into_any(), "Book Dashed"),
(view! { <BookDown /> }.into_any(), "Book Down"),
(view! { <BookHeadphones /> }.into_any(), "Book Headphones"),
(view! { <BookHeart /> }.into_any(), "Book Heart"),
(view! { <BookImage /> }.into_any(), "Book Image"),
(view! { <BookKey /> }.into_any(), "Book Key"),
(view! { <BookLock /> }.into_any(), "Book Lock"),
(view! { <BookMarked /> }.into_any(), "Book Marked"),
(view! { <BookMinus /> }.into_any(), "Book Minus"),
(view! { <BookOpen /> }.into_any(), "Book Open"),
(view! { <BookOpenCheck /> }.into_any(), "Book Open Check"),
(view! { <BookOpenText /> }.into_any(), "Book Open Text"),
(view! { <BookPlus /> }.into_any(), "Book Plus"),
(view! { <BookText /> }.into_any(), "Book Text"),
(view! { <BookType /> }.into_any(), "Book Type"),
(view! { <BookUp /> }.into_any(), "Book Up"),
(view! { <BookUp2 /> }.into_any(), "Book Up 2"),
(view! { <BookUser /> }.into_any(), "Book User"),
(view! { <BookX /> }.into_any(), "Book X"),
(view! { <Bookmark /> }.into_any(), "Bookmark"),
(view! { <BookmarkCheck /> }.into_any(), "Bookmark Check"),
(view! { <BookmarkMinus /> }.into_any(), "Bookmark Minus"),
(view! { <BookmarkPlus /> }.into_any(), "Bookmark Plus"),
(view! { <BookmarkX /> }.into_any(), "Bookmark X"),
(view! { <BoomBox /> }.into_any(), "Boom Box"),
(view! { <Bot /> }.into_any(), "Bot"),
(view! { <BotMessageSquare /> }.into_any(), "Bot Message Square"),
(view! { <BotOff /> }.into_any(), "Bot Off"),
(view! { <Box /> }.into_any(), "Box"),
(view! { <Boxes /> }.into_any(), "Boxes"),
(view! { <Braces /> }.into_any(), "Braces"),
(view! { <Brackets /> }.into_any(), "Brackets"),
(view! { <Brain /> }.into_any(), "Brain"),
(view! { <BrainCircuit /> }.into_any(), "Brain Circuit"),
(view! { <BrainCog /> }.into_any(), "Brain Cog"),
(view! { <BrickWall /> }.into_any(), "Brick Wall"),
(view! { <Briefcase /> }.into_any(), "Briefcase"),
(view! { <BriefcaseBusiness /> }.into_any(), "Briefcase Business"),
(view! { <BriefcaseConveyorBelt /> }.into_any(), "Briefcase Conveyor Belt"),
(view! { <BriefcaseMedical /> }.into_any(), "Briefcase Medical"),
(view! { <BringToFront /> }.into_any(), "Bring To Front"),
(view! { <Brush /> }.into_any(), "Brush"),
(view! { <Bug /> }.into_any(), "Bug"),
(view! { <BugOff /> }.into_any(), "Bug Off"),
(view! { <BugPlay /> }.into_any(), "Bug Play"),
(view! { <Building /> }.into_any(), "Building"),
(view! { <Building2 /> }.into_any(), "Building 2"),
(view! { <Bus /> }.into_any(), "Bus"),
(view! { <BusFront /> }.into_any(), "Bus Front"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsC() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Cable /> }.into_any(), "Cable"),
(view! { <CableCar /> }.into_any(), "Cable Car"),
(view! { <Cake /> }.into_any(), "Cake"),
(view! { <CakeSlice /> }.into_any(), "Cake Slice"),
(view! { <Calculator /> }.into_any(), "Calculator"),
(view! { <Calendar /> }.into_any(), "Calendar"),
(view! { <Calendar1 /> }.into_any(), "Calendar 1"),
(view! { <CalendarArrowDown /> }.into_any(), "Calendar Arrow Down"),
(view! { <CalendarArrowUp /> }.into_any(), "Calendar Arrow Up"),
(view! { <CalendarCheck /> }.into_any(), "Calendar Check"),
(view! { <CalendarCheck2 /> }.into_any(), "Calendar Check 2"),
(view! { <CalendarClock /> }.into_any(), "Calendar Clock"),
(view! { <CalendarCog /> }.into_any(), "Calendar Cog"),
(view! { <CalendarDays /> }.into_any(), "Calendar Days"),
(view! { <CalendarFold /> }.into_any(), "Calendar Fold"),
(view! { <CalendarHeart /> }.into_any(), "Calendar Heart"),
(view! { <CalendarMinus /> }.into_any(), "Calendar Minus"),
(view! { <CalendarMinus2 /> }.into_any(), "Calendar Minus 2"),
(view! { <CalendarOff /> }.into_any(), "Calendar Off"),
(view! { <CalendarPlus /> }.into_any(), "Calendar Plus"),
(view! { <CalendarPlus2 /> }.into_any(), "Calendar Plus 2"),
(view! { <CalendarRange /> }.into_any(), "Calendar Range"),
(view! { <CalendarSearch /> }.into_any(), "Calendar Search"),
(view! { <CalendarSync /> }.into_any(), "Calendar Sync"),
(view! { <CalendarX /> }.into_any(), "Calendar X"),
(view! { <CalendarX2 /> }.into_any(), "Calendar X 2"),
(view! { <Camera /> }.into_any(), "Camera"),
(view! { <CameraOff /> }.into_any(), "Camera Off"),
(view! { <Candy /> }.into_any(), "Candy"),
(view! { <CandyCane /> }.into_any(), "Candy Cane"),
(view! { <CandyOff /> }.into_any(), "Candy Off"),
(view! { <Cannabis /> }.into_any(), "Cannabis"),
(view! { <Captions /> }.into_any(), "Captions"),
(view! { <CaptionsOff /> }.into_any(), "Captions Off"),
(view! { <Car /> }.into_any(), "Car"),
(view! { <CarFront /> }.into_any(), "Car Front"),
(view! { <CarTaxiFront /> }.into_any(), "Car Taxi Front"),
(view! { <Caravan /> }.into_any(), "Caravan"),
(view! { <Carrot /> }.into_any(), "Carrot"),
(view! { <CaseLower /> }.into_any(), "Case Lower"),
(view! { <CaseSensitive /> }.into_any(), "Case Sensitive"),
(view! { <CaseUpper /> }.into_any(), "Case Upper"),
(view! { <CassetteTape /> }.into_any(), "Cassette Tape"),
(view! { <Cast /> }.into_any(), "Cast"),
(view! { <Castle /> }.into_any(), "Castle"),
(view! { <Cat /> }.into_any(), "Cat"),
(view! { <Cctv /> }.into_any(), "Cctv"),
(view! { <ChartArea /> }.into_any(), "Chart Area"),
(view! { <ChartBar /> }.into_any(), "Chart Bar"),
(view! { <ChartBarBig /> }.into_any(), "Chart Bar Big"),
(view! { <ChartBarDecreasing /> }.into_any(), "Chart Bar Decreasing"),
(view! { <ChartBarIncreasing /> }.into_any(), "Chart Bar Increasing"),
(view! { <ChartBarStacked /> }.into_any(), "Chart Bar Stacked"),
(view! { <ChartCandlestick /> }.into_any(), "Chart Candlestick"),
(view! { <ChartColumn /> }.into_any(), "Chart Column"),
(view! { <ChartColumnBig /> }.into_any(), "Chart Column Big"),
(view! { <ChartColumnDecreasing /> }.into_any(), "Chart Column Decreasing"),
(view! { <ChartColumnIncreasing /> }.into_any(), "Chart Column Increasing"),
(view! { <ChartColumnStacked /> }.into_any(), "Chart Column Stacked"),
(view! { <ChartGantt /> }.into_any(), "Chart Gantt"),
(view! { <ChartLine /> }.into_any(), "Chart Line"),
(view! { <ChartNetwork /> }.into_any(), "Chart Network"),
(view! { <ChartNoAxesColumn /> }.into_any(), "Chart No Axes Column"),
(
view! { <ChartNoAxesColumnDecreasing /> }.into_any(),
"Chart No Axes Column Decreasing",
),
(
view! { <ChartNoAxesColumnIncreasing /> }.into_any(),
"Chart No Axes Column Increasing",
),
(view! { <ChartNoAxesCombined /> }.into_any(), "Chart No Axes Combined"),
(view! { <ChartNoAxesGantt /> }.into_any(), "Chart No Axes Gantt"),
(view! { <ChartPie /> }.into_any(), "Chart Pie"),
(view! { <ChartScatter /> }.into_any(), "Chart Scatter"),
(view! { <ChartSpline /> }.into_any(), "Chart Spline"),
(view! { <Check /> }.into_any(), "Check"),
(view! { <CheckCheck /> }.into_any(), "Check Check"),
(view! { <ChefHat /> }.into_any(), "Chef Hat"),
(view! { <Cherry /> }.into_any(), "Cherry"),
(view! { <ChevronDown /> }.into_any(), "Chevron Down"),
(view! { <ChevronFirst /> }.into_any(), "Chevron First"),
(view! { <ChevronLast /> }.into_any(), "Chevron Last"),
(view! { <ChevronLeft /> }.into_any(), "Chevron Left"),
(view! { <ChevronRight /> }.into_any(), "Chevron Right"),
(view! { <ChevronUp /> }.into_any(), "Chevron Up"),
(view! { <ChevronsDown /> }.into_any(), "Chevrons Down"),
(view! { <ChevronsDownUp /> }.into_any(), "Chevrons Down Up"),
(view! { <ChevronsLeft /> }.into_any(), "Chevrons Left"),
(view! { <ChevronsLeftRight /> }.into_any(), "Chevrons Left Right"),
(
view! { <ChevronsLeftRightEllipsis /> }.into_any(),
"Chevrons Left Right Ellipsis",
),
(view! { <ChevronsRight /> }.into_any(), "Chevrons Right"),
(view! { <ChevronsRightLeft /> }.into_any(), "Chevrons Right Left"),
(view! { <ChevronsUp /> }.into_any(), "Chevrons Up"),
(view! { <ChevronsUpDown /> }.into_any(), "Chevrons Up Down"),
(view! { <Chrome /> }.into_any(), "Chrome"),
(view! { <Church /> }.into_any(), "Church"),
(view! { <Cigarette /> }.into_any(), "Cigarette"),
(view! { <CigaretteOff /> }.into_any(), "Cigarette Off"),
(view! { <Circle /> }.into_any(), "Circle"),
(view! { <CircleAlert /> }.into_any(), "Circle Alert"),
(view! { <CircleArrowDown /> }.into_any(), "Circle Arrow Down"),
(view! { <CircleArrowLeft /> }.into_any(), "Circle Arrow Left"),
(view! { <CircleArrowOutDownLeft /> }.into_any(), "Circle Arrow Out Down Left"),
(view! { <CircleArrowOutDownRight /> }.into_any(), "Circle Arrow Out Down Right"),
(view! { <CircleArrowOutUpLeft /> }.into_any(), "Circle Arrow Out Up Left"),
(view! { <CircleArrowOutUpRight /> }.into_any(), "Circle Arrow Out Up Right"),
(view! { <CircleArrowRight /> }.into_any(), "Circle Arrow Right"),
(view! { <CircleArrowUp /> }.into_any(), "Circle Arrow Up"),
(view! { <CircleCheck /> }.into_any(), "Circle Check"),
(view! { <CircleCheckBig /> }.into_any(), "Circle Check Big"),
(view! { <CircleChevronDown /> }.into_any(), "Circle Chevron Down"),
(view! { <CircleChevronLeft /> }.into_any(), "Circle Chevron Left"),
(view! { <CircleChevronRight /> }.into_any(), "Circle Chevron Right"),
(view! { <CircleChevronUp /> }.into_any(), "Circle Chevron Up"),
(view! { <CircleDashed /> }.into_any(), "Circle Dashed"),
(view! { <CircleDivide /> }.into_any(), "Circle Divide"),
(view! { <CircleDollarSign /> }.into_any(), "Circle Dollar Sign"),
(view! { <CircleDot /> }.into_any(), "Circle Dot"),
(view! { <CircleDotDashed /> }.into_any(), "Circle Dot Dashed"),
(view! { <CircleEllipsis /> }.into_any(), "Circle Ellipsis"),
(view! { <CircleEqual /> }.into_any(), "Circle Equal"),
(view! { <CircleFadingArrowUp /> }.into_any(), "Circle Fading Arrow Up"),
(view! { <CircleFadingPlus /> }.into_any(), "Circle Fading Plus"),
(view! { <CircleGauge /> }.into_any(), "Circle Gauge"),
(view! { <CircleHelp /> }.into_any(), "Circle Help"),
(view! { <CircleMinus /> }.into_any(), "Circle Minus"),
(view! { <CircleOff /> }.into_any(), "Circle Off"),
(view! { <CircleParking /> }.into_any(), "Circle Parking"),
(view! { <CircleParkingOff /> }.into_any(), "Circle Parking Off"),
(view! { <CirclePause /> }.into_any(), "Circle Pause"),
(view! { <CirclePercent /> }.into_any(), "Circle Percent"),
(view! { <CirclePlay /> }.into_any(), "Circle Play"),
(view! { <CirclePlus /> }.into_any(), "Circle Plus"),
(view! { <CirclePower /> }.into_any(), "Circle Power"),
(view! { <CircleSlash /> }.into_any(), "Circle Slash"),
(view! { <CircleSlash2 /> }.into_any(), "Circle Slash 2"),
(view! { <CircleStop /> }.into_any(), "Circle Stop"),
(view! { <CircleUser /> }.into_any(), "Circle User"),
(view! { <CircleUserRound /> }.into_any(), "Circle User Round"),
(view! { <CircleX /> }.into_any(), "Circle X"),
(view! { <CircuitBoard /> }.into_any(), "Circuit Board"),
(view! { <Citrus /> }.into_any(), "Citrus"),
(view! { <Clapperboard /> }.into_any(), "Clapperboard"),
(view! { <Clipboard /> }.into_any(), "Clipboard"),
(view! { <ClipboardCheck /> }.into_any(), "Clipboard Check"),
(view! { <ClipboardCopy /> }.into_any(), "Clipboard Copy"),
(view! { <ClipboardList /> }.into_any(), "Clipboard List"),
(view! { <ClipboardMinus /> }.into_any(), "Clipboard Minus"),
(view! { <ClipboardPaste /> }.into_any(), "Clipboard Paste"),
(view! { <ClipboardPen /> }.into_any(), "Clipboard Pen"),
(view! { <ClipboardPenLine /> }.into_any(), "Clipboard Pen Line"),
(view! { <ClipboardPlus /> }.into_any(), "Clipboard Plus"),
(view! { <ClipboardType /> }.into_any(), "Clipboard Type"),
(view! { <ClipboardX /> }.into_any(), "Clipboard X"),
(view! { <Clock /> }.into_any(), "Clock"),
(view! { <Clock1 /> }.into_any(), "Clock 1"),
(view! { <Clock10 /> }.into_any(), "Clock 10"),
(view! { <Clock11 /> }.into_any(), "Clock 11"),
(view! { <Clock12 /> }.into_any(), "Clock 12"),
(view! { <Clock2 /> }.into_any(), "Clock 2"),
(view! { <Clock3 /> }.into_any(), "Clock 3"),
(view! { <Clock4 /> }.into_any(), "Clock 4"),
(view! { <Clock5 /> }.into_any(), "Clock 5"),
(view! { <Clock6 /> }.into_any(), "Clock 6"),
(view! { <Clock7 /> }.into_any(), "Clock 7"),
(view! { <Clock8 /> }.into_any(), "Clock 8"),
(view! { <Clock9 /> }.into_any(), "Clock 9"),
(view! { <ClockAlert /> }.into_any(), "Clock Alert"),
(view! { <ClockArrowDown /> }.into_any(), "Clock Arrow Down"),
(view! { <ClockArrowUp /> }.into_any(), "Clock Arrow Up"),
(view! { <Cloud /> }.into_any(), "Cloud"),
(view! { <CloudAlert /> }.into_any(), "Cloud Alert"),
(view! { <CloudCog /> }.into_any(), "Cloud Cog"),
(view! { <CloudDownload /> }.into_any(), "Cloud Download"),
(view! { <CloudDrizzle /> }.into_any(), "Cloud Drizzle"),
(view! { <CloudFog /> }.into_any(), "Cloud Fog"),
(view! { <CloudHail /> }.into_any(), "Cloud Hail"),
(view! { <CloudLightning /> }.into_any(), "Cloud Lightning"),
(view! { <CloudMoon /> }.into_any(), "Cloud Moon"),
(view! { <CloudMoonRain /> }.into_any(), "Cloud Moon Rain"),
(view! { <CloudOff /> }.into_any(), "Cloud Off"),
(view! { <CloudRain /> }.into_any(), "Cloud Rain"),
(view! { <CloudRainWind /> }.into_any(), "Cloud Rain Wind"),
(view! { <CloudSnow /> }.into_any(), "Cloud Snow"),
(view! { <CloudSun /> }.into_any(), "Cloud Sun"),
(view! { <CloudSunRain /> }.into_any(), "Cloud Sun Rain"),
(view! { <CloudUpload /> }.into_any(), "Cloud Upload"),
(view! { <Cloudy /> }.into_any(), "Cloudy"),
(view! { <Clover /> }.into_any(), "Clover"),
(view! { <Club /> }.into_any(), "Club"),
(view! { <Code /> }.into_any(), "Code"),
(view! { <CodeXml /> }.into_any(), "Code Xml"),
(view! { <Codepen /> }.into_any(), "Codepen"),
(view! { <Codesandbox /> }.into_any(), "Codesandbox"),
(view! { <Coffee /> }.into_any(), "Coffee"),
(view! { <Cog /> }.into_any(), "Cog"),
(view! { <Coins /> }.into_any(), "Coins"),
(view! { <Columns2 /> }.into_any(), "Columns 2"),
(view! { <Columns3 /> }.into_any(), "Columns 3"),
(view! { <Columns4 /> }.into_any(), "Columns 4"),
(view! { <Combine /> }.into_any(), "Combine"),
(view! { <Command /> }.into_any(), "Command"),
(view! { <Compass /> }.into_any(), "Compass"),
(view! { <Component /> }.into_any(), "Component"),
(view! { <Computer /> }.into_any(), "Computer"),
(view! { <ConciergeBell /> }.into_any(), "Concierge Bell"),
(view! { <Cone /> }.into_any(), "Cone"),
(view! { <Construction /> }.into_any(), "Construction"),
(view! { <Contact /> }.into_any(), "Contact"),
(view! { <ContactRound /> }.into_any(), "Contact Round"),
(view! { <Container /> }.into_any(), "Container"),
(view! { <Contrast /> }.into_any(), "Contrast"),
(view! { <Cookie /> }.into_any(), "Cookie"),
(view! { <CookingPot /> }.into_any(), "Cooking Pot"),
(view! { <Copy /> }.into_any(), "Copy"),
(view! { <CopyCheck /> }.into_any(), "Copy Check"),
(view! { <CopyMinus /> }.into_any(), "Copy Minus"),
(view! { <CopyPlus /> }.into_any(), "Copy Plus"),
(view! { <CopySlash /> }.into_any(), "Copy Slash"),
(view! { <CopyX /> }.into_any(), "Copy X"),
(view! { <Copyleft /> }.into_any(), "Copyleft"),
(view! { <Copyright /> }.into_any(), "Copyright"),
(view! { <CornerDownLeft /> }.into_any(), "Corner Down Left"),
(view! { <CornerDownRight /> }.into_any(), "Corner Down Right"),
(view! { <CornerLeftDown /> }.into_any(), "Corner Left Down"),
(view! { <CornerLeftUp /> }.into_any(), "Corner Left Up"),
(view! { <CornerRightDown /> }.into_any(), "Corner Right Down"),
(view! { <CornerRightUp /> }.into_any(), "Corner Right Up"),
(view! { <CornerUpLeft /> }.into_any(), "Corner Up Left"),
(view! { <CornerUpRight /> }.into_any(), "Corner Up Right"),
(view! { <Cpu /> }.into_any(), "Cpu"),
(view! { <CreativeCommons /> }.into_any(), "Creative Commons"),
(view! { <CreditCard /> }.into_any(), "Credit Card"),
(view! { <Croissant /> }.into_any(), "Croissant"),
(view! { <Crop /> }.into_any(), "Crop"),
(view! { <Cross /> }.into_any(), "Cross"),
(view! { <Crosshair /> }.into_any(), "Crosshair"),
(view! { <Crown /> }.into_any(), "Crown"),
(view! { <Cuboid /> }.into_any(), "Cuboid"),
(view! { <CupSoda /> }.into_any(), "Cup Soda"),
(view! { <Currency /> }.into_any(), "Currency"),
(view! { <Cylinder /> }.into_any(), "Cylinder"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsD() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Dam /> }.into_any(), "Dam"),
(view! { <Database /> }.into_any(), "Database"),
(view! { <DatabaseBackup /> }.into_any(), "Database Backup"),
(view! { <DatabaseZap /> }.into_any(), "Database Zap"),
(view! { <Delete /> }.into_any(), "Delete"),
(view! { <Dessert /> }.into_any(), "Dessert"),
(view! { <Diameter /> }.into_any(), "Diameter"),
(view! { <Diamond /> }.into_any(), "Diamond"),
(view! { <DiamondMinus /> }.into_any(), "Diamond Minus"),
(view! { <DiamondPercent /> }.into_any(), "Diamond Percent"),
(view! { <DiamondPlus /> }.into_any(), "Diamond Plus"),
(view! { <Dice1 /> }.into_any(), "Dice 1"),
(view! { <Dice2 /> }.into_any(), "Dice 2"),
(view! { <Dice3 /> }.into_any(), "Dice 3"),
(view! { <Dice4 /> }.into_any(), "Dice 4"),
(view! { <Dice5 /> }.into_any(), "Dice 5"),
(view! { <Dice6 /> }.into_any(), "Dice 6"),
(view! { <Dices /> }.into_any(), "Dices"),
(view! { <Diff /> }.into_any(), "Diff"),
(view! { <Disc /> }.into_any(), "Disc"),
(view! { <Disc2 /> }.into_any(), "Disc 2"),
(view! { <Disc3 /> }.into_any(), "Disc 3"),
(view! { <DiscAlbum /> }.into_any(), "Disc Album"),
(view! { <Divide /> }.into_any(), "Divide"),
(view! { <Dna /> }.into_any(), "Dna"),
(view! { <DnaOff /> }.into_any(), "Dna Off"),
(view! { <Dock /> }.into_any(), "Dock"),
(view! { <Dog /> }.into_any(), "Dog"),
(view! { <DollarSign /> }.into_any(), "Dollar Sign"),
(view! { <Donut /> }.into_any(), "Donut"),
(view! { <DoorClosed /> }.into_any(), "Door Closed"),
(view! { <DoorOpen /> }.into_any(), "Door Open"),
(view! { <Dot /> }.into_any(), "Dot"),
(view! { <Download /> }.into_any(), "Download"),
(view! { <DraftingCompass /> }.into_any(), "Drafting Compass"),
(view! { <Drama /> }.into_any(), "Drama"),
(view! { <Dribbble /> }.into_any(), "Dribbble"),
(view! { <Drill /> }.into_any(), "Drill"),
(view! { <Droplet /> }.into_any(), "Droplet"),
(view! { <DropletOff /> }.into_any(), "Droplet Off"),
(view! { <Droplets /> }.into_any(), "Droplets"),
(view! { <Drum /> }.into_any(), "Drum"),
(view! { <Drumstick /> }.into_any(), "Drumstick"),
(view! { <Dumbbell /> }.into_any(), "Dumbbell"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsE() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Ear /> }.into_any(), "Ear"),
(view! { <EarOff /> }.into_any(), "Ear Off"),
(view! { <Earth /> }.into_any(), "Earth"),
(view! { <EarthLock /> }.into_any(), "Earth Lock"),
(view! { <Eclipse /> }.into_any(), "Eclipse"),
(view! { <Egg /> }.into_any(), "Egg"),
(view! { <EggFried /> }.into_any(), "Egg Fried"),
(view! { <EggOff /> }.into_any(), "Egg Off"),
(view! { <Ellipsis /> }.into_any(), "Ellipsis"),
(view! { <EllipsisVertical /> }.into_any(), "Ellipsis Vertical"),
(view! { <Equal /> }.into_any(), "Equal"),
(view! { <EqualApproximately /> }.into_any(), "Equal Approximately"),
(view! { <EqualNot /> }.into_any(), "Equal Not"),
(view! { <Eraser /> }.into_any(), "Eraser"),
(view! { <EthernetPort /> }.into_any(), "Ethernet Port"),
(view! { <Euro /> }.into_any(), "Euro"),
(view! { <Expand /> }.into_any(), "Expand"),
(view! { <ExternalLink /> }.into_any(), "External Link"),
(view! { <Eye /> }.into_any(), "Eye"),
(view! { <EyeClosed /> }.into_any(), "Eye Closed"),
(view! { <EyeOff /> }.into_any(), "Eye Off"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsF() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Facebook /> }.into_any(), "Facebook"),
(view! { <Factory /> }.into_any(), "Factory"),
(view! { <Fan /> }.into_any(), "Fan"),
(view! { <FastForward /> }.into_any(), "Fast Forward"),
(view! { <Feather /> }.into_any(), "Feather"),
(view! { <Fence /> }.into_any(), "Fence"),
(view! { <FerrisWheel /> }.into_any(), "Ferris Wheel"),
(view! { <Figma /> }.into_any(), "Figma"),
(view! { <File /> }.into_any(), "File"),
(view! { <FileArchive /> }.into_any(), "File Archive"),
(view! { <FileAudio /> }.into_any(), "File Audio"),
(view! { <FileAudio2 /> }.into_any(), "File Audio 2"),
(view! { <FileAxis3D /> }.into_any(), "File Axis 3 D"),
(view! { <FileBadge /> }.into_any(), "File Badge"),
(view! { <FileBadge2 /> }.into_any(), "File Badge 2"),
(view! { <FileBox /> }.into_any(), "File Box"),
(view! { <FileChartColumn /> }.into_any(), "File Chart Column"),
(
view! { <FileChartColumnIncreasing /> }.into_any(),
"File Chart Column Increasing",
),
(view! { <FileChartLine /> }.into_any(), "File Chart Line"),
(view! { <FileChartPie /> }.into_any(), "File Chart Pie"),
(view! { <FileCheck /> }.into_any(), "File Check"),
(view! { <FileCheck2 /> }.into_any(), "File Check 2"),
(view! { <FileClock /> }.into_any(), "File Clock"),
(view! { <FileCode /> }.into_any(), "File Code"),
(view! { <FileCode2 /> }.into_any(), "File Code 2"),
(view! { <FileCog /> }.into_any(), "File Cog"),
(view! { <FileDiff /> }.into_any(), "File Diff"),
(view! { <FileDigit /> }.into_any(), "File Digit"),
(view! { <FileDown /> }.into_any(), "File Down"),
(view! { <FileHeart /> }.into_any(), "File Heart"),
(view! { <FileImage /> }.into_any(), "File Image"),
(view! { <FileInput /> }.into_any(), "File Input"),
(view! { <FileJson /> }.into_any(), "File Json"),
(view! { <FileJson2 /> }.into_any(), "File Json 2"),
(view! { <FileKey /> }.into_any(), "File Key"),
(view! { <FileKey2 /> }.into_any(), "File Key 2"),
(view! { <FileLock /> }.into_any(), "File Lock"),
(view! { <FileLock2 /> }.into_any(), "File Lock 2"),
(view! { <FileMinus /> }.into_any(), "File Minus"),
(view! { <FileMinus2 /> }.into_any(), "File Minus 2"),
(view! { <FileMusic /> }.into_any(), "File Music"),
(view! { <FileOutput /> }.into_any(), "File Output"),
(view! { <FilePen /> }.into_any(), "File Pen"),
(view! { <FilePenLine /> }.into_any(), "File Pen Line"),
(view! { <FilePlus /> }.into_any(), "File Plus"),
(view! { <FilePlus2 /> }.into_any(), "File Plus 2"),
(view! { <FileQuestion /> }.into_any(), "File Question"),
(view! { <FileScan /> }.into_any(), "File Scan"),
(view! { <FileSearch /> }.into_any(), "File Search"),
(view! { <FileSearch2 /> }.into_any(), "File Search 2"),
(view! { <FileSliders /> }.into_any(), "File Sliders"),
(view! { <FileSpreadsheet /> }.into_any(), "File Spreadsheet"),
(view! { <FileStack /> }.into_any(), "File Stack"),
(view! { <FileSymlink /> }.into_any(), "File Symlink"),
(view! { <FileTerminal /> }.into_any(), "File Terminal"),
(view! { <FileText /> }.into_any(), "File Text"),
(view! { <FileType /> }.into_any(), "File Type"),
(view! { <FileType2 /> }.into_any(), "File Type 2"),
(view! { <FileUp /> }.into_any(), "File Up"),
(view! { <FileUser /> }.into_any(), "File User"),
(view! { <FileVideo /> }.into_any(), "File Video"),
(view! { <FileVideo2 /> }.into_any(), "File Video 2"),
(view! { <FileVolume /> }.into_any(), "File Volume"),
(view! { <FileVolume2 /> }.into_any(), "File Volume 2"),
(view! { <FileWarning /> }.into_any(), "File Warning"),
(view! { <FileX /> }.into_any(), "File X"),
(view! { <FileX2 /> }.into_any(), "File X 2"),
(view! { <Files /> }.into_any(), "Files"),
(view! { <Film /> }.into_any(), "Film"),
(view! { <Filter /> }.into_any(), "Filter"),
(view! { <FilterX /> }.into_any(), "Filter X"),
(view! { <Fingerprint /> }.into_any(), "Fingerprint"),
(view! { <FireExtinguisher /> }.into_any(), "Fire Extinguisher"),
(view! { <Fish /> }.into_any(), "Fish"),
(view! { <FishOff /> }.into_any(), "Fish Off"),
(view! { <FishSymbol /> }.into_any(), "Fish Symbol"),
(view! { <Flag /> }.into_any(), "Flag"),
(view! { <FlagOff /> }.into_any(), "Flag Off"),
(view! { <FlagTriangleLeft /> }.into_any(), "Flag Triangle Left"),
(view! { <FlagTriangleRight /> }.into_any(), "Flag Triangle Right"),
(view! { <Flame /> }.into_any(), "Flame"),
(view! { <FlameKindling /> }.into_any(), "Flame Kindling"),
(view! { <Flashlight /> }.into_any(), "Flashlight"),
(view! { <FlashlightOff /> }.into_any(), "Flashlight Off"),
(view! { <FlaskConical /> }.into_any(), "Flask Conical"),
(view! { <FlaskConicalOff /> }.into_any(), "Flask Conical Off"),
(view! { <FlaskRound /> }.into_any(), "Flask Round"),
(view! { <FlipHorizontal /> }.into_any(), "Flip Horizontal"),
(view! { <FlipHorizontal2 /> }.into_any(), "Flip Horizontal 2"),
(view! { <FlipVertical /> }.into_any(), "Flip Vertical"),
(view! { <FlipVertical2 /> }.into_any(), "Flip Vertical 2"),
(view! { <Flower /> }.into_any(), "Flower"),
(view! { <Flower2 /> }.into_any(), "Flower 2"),
(view! { <Focus /> }.into_any(), "Focus"),
(view! { <FoldHorizontal /> }.into_any(), "Fold Horizontal"),
(view! { <FoldVertical /> }.into_any(), "Fold Vertical"),
(view! { <Folder /> }.into_any(), "Folder"),
(view! { <FolderArchive /> }.into_any(), "Folder Archive"),
(view! { <FolderCheck /> }.into_any(), "Folder Check"),
(view! { <FolderClock /> }.into_any(), "Folder Clock"),
(view! { <FolderClosed /> }.into_any(), "Folder Closed"),
(view! { <FolderCode /> }.into_any(), "Folder Code"),
(view! { <FolderCog /> }.into_any(), "Folder Cog"),
(view! { <FolderDot /> }.into_any(), "Folder Dot"),
(view! { <FolderDown /> }.into_any(), "Folder Down"),
(view! { <FolderGit /> }.into_any(), "Folder Git"),
(view! { <FolderGit2 /> }.into_any(), "Folder Git 2"),
(view! { <FolderHeart /> }.into_any(), "Folder Heart"),
(view! { <FolderInput /> }.into_any(), "Folder Input"),
(view! { <FolderKanban /> }.into_any(), "Folder Kanban"),
(view! { <FolderKey /> }.into_any(), "Folder Key"),
(view! { <FolderLock /> }.into_any(), "Folder Lock"),
(view! { <FolderMinus /> }.into_any(), "Folder Minus"),
(view! { <FolderOpen /> }.into_any(), "Folder Open"),
(view! { <FolderOpenDot /> }.into_any(), "Folder Open Dot"),
(view! { <FolderOutput /> }.into_any(), "Folder Output"),
(view! { <FolderPen /> }.into_any(), "Folder Pen"),
(view! { <FolderPlus /> }.into_any(), "Folder Plus"),
(view! { <FolderRoot /> }.into_any(), "Folder Root"),
(view! { <FolderSearch /> }.into_any(), "Folder Search"),
(view! { <FolderSearch2 /> }.into_any(), "Folder Search 2"),
(view! { <FolderSymlink /> }.into_any(), "Folder Symlink"),
(view! { <FolderSync /> }.into_any(), "Folder Sync"),
(view! { <FolderTree /> }.into_any(), "Folder Tree"),
(view! { <FolderUp /> }.into_any(), "Folder Up"),
(view! { <FolderX /> }.into_any(), "Folder X"),
(view! { <Folders /> }.into_any(), "Folders"),
(view! { <Footprints /> }.into_any(), "Footprints"),
(view! { <Forklift /> }.into_any(), "Forklift"),
(view! { <Forward /> }.into_any(), "Forward"),
(view! { <Frame /> }.into_any(), "Frame"),
(view! { <Framer /> }.into_any(), "Framer"),
(view! { <Frown /> }.into_any(), "Frown"),
(view! { <Fuel /> }.into_any(), "Fuel"),
(view! { <Fullscreen /> }.into_any(), "Fullscreen"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsG() -> impl IntoView {
view! {
<For
each=move || [
(view! { <GalleryHorizontal /> }.into_any(), "Gallery Horizontal"),
(view! { <GalleryHorizontalEnd /> }.into_any(), "Gallery Horizontal End"),
(view! { <GalleryThumbnails /> }.into_any(), "Gallery Thumbnails"),
(view! { <GalleryVertical /> }.into_any(), "Gallery Vertical"),
(view! { <GalleryVerticalEnd /> }.into_any(), "Gallery Vertical End"),
(view! { <Gamepad /> }.into_any(), "Gamepad"),
(view! { <Gamepad2 /> }.into_any(), "Gamepad 2"),
(view! { <Gauge /> }.into_any(), "Gauge"),
(view! { <Gavel /> }.into_any(), "Gavel"),
(view! { <Gem /> }.into_any(), "Gem"),
(view! { <Ghost /> }.into_any(), "Ghost"),
(view! { <Gift /> }.into_any(), "Gift"),
(view! { <GitBranch /> }.into_any(), "Git Branch"),
(view! { <GitBranchPlus /> }.into_any(), "Git Branch Plus"),
(view! { <GitCommitHorizontal /> }.into_any(), "Git Commit Horizontal"),
(view! { <GitCommitVertical /> }.into_any(), "Git Commit Vertical"),
(view! { <GitCompare /> }.into_any(), "Git Compare"),
(view! { <GitCompareArrows /> }.into_any(), "Git Compare Arrows"),
(view! { <GitFork /> }.into_any(), "Git Fork"),
(view! { <GitGraph /> }.into_any(), "Git Graph"),
(view! { <GitMerge /> }.into_any(), "Git Merge"),
(view! { <GitPullRequest /> }.into_any(), "Git Pull Request"),
(view! { <GitPullRequestArrow /> }.into_any(), "Git Pull Request Arrow"),
(view! { <GitPullRequestClosed /> }.into_any(), "Git Pull Request Closed"),
(view! { <GitPullRequestCreate /> }.into_any(), "Git Pull Request Create"),
(
view! { <GitPullRequestCreateArrow /> }.into_any(),
"Git Pull Request Create Arrow",
),
(view! { <GitPullRequestDraft /> }.into_any(), "Git Pull Request Draft"),
(view! { <Github /> }.into_any(), "Github"),
(view! { <Gitlab /> }.into_any(), "Gitlab"),
(view! { <GlassWater /> }.into_any(), "Glass Water"),
(view! { <Glasses /> }.into_any(), "Glasses"),
(view! { <Globe /> }.into_any(), "Globe"),
(view! { <GlobeLock /> }.into_any(), "Globe Lock"),
(view! { <Goal /> }.into_any(), "Goal"),
(view! { <Grab /> }.into_any(), "Grab"),
(view! { <GraduationCap /> }.into_any(), "Graduation Cap"),
(view! { <Grape /> }.into_any(), "Grape"),
(view! { <Grid2X2 /> }.into_any(), "Grid 2 X 2"),
(view! { <Grid2X2Check /> }.into_any(), "Grid 2 X 2 Check"),
(view! { <Grid2X2Plus /> }.into_any(), "Grid 2 X 2 Plus"),
(view! { <Grid2X2X /> }.into_any(), "Grid 2 X 2 X"),
(view! { <Grid3X3 /> }.into_any(), "Grid 3 X 3"),
(view! { <Grip /> }.into_any(), "Grip"),
(view! { <GripHorizontal /> }.into_any(), "Grip Horizontal"),
(view! { <GripVertical /> }.into_any(), "Grip Vertical"),
(view! { <Group /> }.into_any(), "Group"),
(view! { <Guitar /> }.into_any(), "Guitar"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsH() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Ham /> }.into_any(), "Ham"),
(view! { <Hammer /> }.into_any(), "Hammer"),
(view! { <Hand /> }.into_any(), "Hand"),
(view! { <HandCoins /> }.into_any(), "Hand Coins"),
(view! { <HandHeart /> }.into_any(), "Hand Heart"),
(view! { <HandHelping /> }.into_any(), "Hand Helping"),
(view! { <HandMetal /> }.into_any(), "Hand Metal"),
(view! { <HandPlatter /> }.into_any(), "Hand Platter"),
(view! { <Handshake /> }.into_any(), "Handshake"),
(view! { <HardDrive /> }.into_any(), "Hard Drive"),
(view! { <HardDriveDownload /> }.into_any(), "Hard Drive Download"),
(view! { <HardDriveUpload /> }.into_any(), "Hard Drive Upload"),
(view! { <HardHat /> }.into_any(), "Hard Hat"),
(view! { <Hash /> }.into_any(), "Hash"),
(view! { <Haze /> }.into_any(), "Haze"),
(view! { <HdmiPort /> }.into_any(), "Hdmi Port"),
(view! { <Heading /> }.into_any(), "Heading"),
(view! { <Heading1 /> }.into_any(), "Heading 1"),
(view! { <Heading2 /> }.into_any(), "Heading 2"),
(view! { <Heading3 /> }.into_any(), "Heading 3"),
(view! { <Heading4 /> }.into_any(), "Heading 4"),
(view! { <Heading5 /> }.into_any(), "Heading 5"),
(view! { <Heading6 /> }.into_any(), "Heading 6"),
(view! { <HeadphoneOff /> }.into_any(), "Headphone Off"),
(view! { <Headphones /> }.into_any(), "Headphones"),
(view! { <Headset /> }.into_any(), "Headset"),
(view! { <Heart /> }.into_any(), "Heart"),
(view! { <HeartCrack /> }.into_any(), "Heart Crack"),
(view! { <HeartHandshake /> }.into_any(), "Heart Handshake"),
(view! { <HeartOff /> }.into_any(), "Heart Off"),
(view! { <HeartPulse /> }.into_any(), "Heart Pulse"),
(view! { <Heater /> }.into_any(), "Heater"),
(view! { <Hexagon /> }.into_any(), "Hexagon"),
(view! { <Highlighter /> }.into_any(), "Highlighter"),
(view! { <History /> }.into_any(), "History"),
(view! { <Hop /> }.into_any(), "Hop"),
(view! { <HopOff /> }.into_any(), "Hop Off"),
(view! { <Hospital /> }.into_any(), "Hospital"),
(view! { <Hotel /> }.into_any(), "Hotel"),
(view! { <Hourglass /> }.into_any(), "Hourglass"),
(view! { <House /> }.into_any(), "House"),
(view! { <HousePlug /> }.into_any(), "House Plug"),
(view! { <HousePlus /> }.into_any(), "House Plus"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsI() -> impl IntoView {
view! {
<For
each=move || [
(view! { <IceCreamBowl /> }.into_any(), "Ice Cream Bowl"),
(view! { <IceCreamCone /> }.into_any(), "Ice Cream Cone"),
(view! { <IdCard /> }.into_any(), "Id Card"),
(view! { <Image /> }.into_any(), "Image"),
(view! { <ImageDown /> }.into_any(), "Image Down"),
(view! { <ImageMinus /> }.into_any(), "Image Minus"),
(view! { <ImageOff /> }.into_any(), "Image Off"),
(view! { <ImagePlay /> }.into_any(), "Image Play"),
(view! { <ImagePlus /> }.into_any(), "Image Plus"),
(view! { <ImageUp /> }.into_any(), "Image Up"),
(view! { <ImageUpscale /> }.into_any(), "Image Upscale"),
(view! { <Images /> }.into_any(), "Images"),
(view! { <Import /> }.into_any(), "Import"),
(view! { <Inbox /> }.into_any(), "Inbox"),
(view! { <IndentDecrease /> }.into_any(), "Indent Decrease"),
(view! { <IndentIncrease /> }.into_any(), "Indent Increase"),
(view! { <IndianRupee /> }.into_any(), "Indian Rupee"),
(view! { <Infinity /> }.into_any(), "Infinity"),
(view! { <Info /> }.into_any(), "Info"),
(view! { <InspectionPanel /> }.into_any(), "Inspection Panel"),
(view! { <Instagram /> }.into_any(), "Instagram"),
(view! { <Italic /> }.into_any(), "Italic"),
(view! { <IterationCcw /> }.into_any(), "Iteration Ccw"),
(view! { <IterationCw /> }.into_any(), "Iteration Cw"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsJ() -> impl IntoView {
view! {
<For
each=move || [
(view! { <JapaneseYen /> }.into_any(), "Japanese Yen"),
(view! { <Joystick /> }.into_any(), "Joystick"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsK() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Kanban /> }.into_any(), "Kanban"),
(view! { <Key /> }.into_any(), "Key"),
(view! { <KeyRound /> }.into_any(), "Key Round"),
(view! { <KeySquare /> }.into_any(), "Key Square"),
(view! { <Keyboard /> }.into_any(), "Keyboard"),
(view! { <KeyboardMusic /> }.into_any(), "Keyboard Music"),
(view! { <KeyboardOff /> }.into_any(), "Keyboard Off"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsL() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Lamp /> }.into_any(), "Lamp"),
(view! { <LampCeiling /> }.into_any(), "Lamp Ceiling"),
(view! { <LampDesk /> }.into_any(), "Lamp Desk"),
(view! { <LampFloor /> }.into_any(), "Lamp Floor"),
(view! { <LampWallDown /> }.into_any(), "Lamp Wall Down"),
(view! { <LampWallUp /> }.into_any(), "Lamp Wall Up"),
(view! { <LandPlot /> }.into_any(), "Land Plot"),
(view! { <Landmark /> }.into_any(), "Landmark"),
(view! { <Languages /> }.into_any(), "Languages"),
(view! { <Laptop /> }.into_any(), "Laptop"),
(view! { <LaptopMinimal /> }.into_any(), "Laptop Minimal"),
(view! { <LaptopMinimalCheck /> }.into_any(), "Laptop Minimal Check"),
(view! { <Lasso /> }.into_any(), "Lasso"),
(view! { <LassoSelect /> }.into_any(), "Lasso Select"),
(view! { <Laugh /> }.into_any(), "Laugh"),
(view! { <Layers /> }.into_any(), "Layers"),
(view! { <Layers2 /> }.into_any(), "Layers 2"),
(view! { <LayoutDashboard /> }.into_any(), "Layout Dashboard"),
(view! { <LayoutGrid /> }.into_any(), "Layout Grid"),
(view! { <LayoutList /> }.into_any(), "Layout List"),
(view! { <LayoutPanelLeft /> }.into_any(), "Layout Panel Left"),
(view! { <LayoutPanelTop /> }.into_any(), "Layout Panel Top"),
(view! { <LayoutTemplate /> }.into_any(), "Layout Template"),
(view! { <Leaf /> }.into_any(), "Leaf"),
(view! { <LeafyGreen /> }.into_any(), "Leafy Green"),
(view! { <Lectern /> }.into_any(), "Lectern"),
(view! { <LetterText /> }.into_any(), "Letter Text"),
(view! { <Library /> }.into_any(), "Library"),
(view! { <LibraryBig /> }.into_any(), "Library Big"),
(view! { <LifeBuoy /> }.into_any(), "Life Buoy"),
(view! { <Ligature /> }.into_any(), "Ligature"),
(view! { <Lightbulb /> }.into_any(), "Lightbulb"),
(view! { <LightbulbOff /> }.into_any(), "Lightbulb Off"),
(view! { <Link /> }.into_any(), "Link"),
(view! { <Link2 /> }.into_any(), "Link 2"),
(view! { <Link2Off /> }.into_any(), "Link 2 Off"),
(view! { <Linkedin /> }.into_any(), "Linkedin"),
(view! { <List /> }.into_any(), "List"),
(view! { <ListCheck /> }.into_any(), "List Check"),
(view! { <ListChecks /> }.into_any(), "List Checks"),
(view! { <ListCollapse /> }.into_any(), "List Collapse"),
(view! { <ListEnd /> }.into_any(), "List End"),
(view! { <ListFilter /> }.into_any(), "List Filter"),
(view! { <ListFilterPlus /> }.into_any(), "List Filter Plus"),
(view! { <ListMinus /> }.into_any(), "List Minus"),
(view! { <ListMusic /> }.into_any(), "List Music"),
(view! { <ListOrdered /> }.into_any(), "List Ordered"),
(view! { <ListPlus /> }.into_any(), "List Plus"),
(view! { <ListRestart /> }.into_any(), "List Restart"),
(view! { <ListStart /> }.into_any(), "List Start"),
(view! { <ListTodo /> }.into_any(), "List Todo"),
(view! { <ListTree /> }.into_any(), "List Tree"),
(view! { <ListVideo /> }.into_any(), "List Video"),
(view! { <ListX /> }.into_any(), "List X"),
(view! { <Loader /> }.into_any(), "Loader"),
(view! { <LoaderCircle /> }.into_any(), "Loader Circle"),
(view! { <LoaderPinwheel /> }.into_any(), "Loader Pinwheel"),
(view! { <Locate /> }.into_any(), "Locate"),
(view! { <LocateFixed /> }.into_any(), "Locate Fixed"),
(view! { <LocateOff /> }.into_any(), "Locate Off"),
(view! { <Lock /> }.into_any(), "Lock"),
(view! { <LockKeyhole /> }.into_any(), "Lock Keyhole"),
(view! { <LockKeyholeOpen /> }.into_any(), "Lock Keyhole Open"),
(view! { <LockOpen /> }.into_any(), "Lock Open"),
(view! { <LogIn /> }.into_any(), "Log In"),
(view! { <LogOut /> }.into_any(), "Log Out"),
(view! { <Logs /> }.into_any(), "Logs"),
(view! { <Lollipop /> }.into_any(), "Lollipop"),
(view! { <Luggage /> }.into_any(), "Luggage"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsM() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Magnet /> }.into_any(), "Magnet"),
(view! { <Mail /> }.into_any(), "Mail"),
(view! { <MailCheck /> }.into_any(), "Mail Check"),
(view! { <MailMinus /> }.into_any(), "Mail Minus"),
(view! { <MailOpen /> }.into_any(), "Mail Open"),
(view! { <MailPlus /> }.into_any(), "Mail Plus"),
(view! { <MailQuestion /> }.into_any(), "Mail Question"),
(view! { <MailSearch /> }.into_any(), "Mail Search"),
(view! { <MailWarning /> }.into_any(), "Mail Warning"),
(view! { <MailX /> }.into_any(), "Mail X"),
(view! { <Mailbox /> }.into_any(), "Mailbox"),
(view! { <Mails /> }.into_any(), "Mails"),
(view! { <Map /> }.into_any(), "Map"),
(view! { <MapPin /> }.into_any(), "Map Pin"),
(view! { <MapPinCheck /> }.into_any(), "Map Pin Check"),
(view! { <MapPinCheckInside /> }.into_any(), "Map Pin Check Inside"),
(view! { <MapPinHouse /> }.into_any(), "Map Pin House"),
(view! { <MapPinMinus /> }.into_any(), "Map Pin Minus"),
(view! { <MapPinMinusInside /> }.into_any(), "Map Pin Minus Inside"),
(view! { <MapPinOff /> }.into_any(), "Map Pin Off"),
(view! { <MapPinPlus /> }.into_any(), "Map Pin Plus"),
(view! { <MapPinPlusInside /> }.into_any(), "Map Pin Plus Inside"),
(view! { <MapPinX /> }.into_any(), "Map Pin X"),
(view! { <MapPinXInside /> }.into_any(), "Map Pin X Inside"),
(view! { <MapPinned /> }.into_any(), "Map Pinned"),
(view! { <Martini /> }.into_any(), "Martini"),
(view! { <Maximize /> }.into_any(), "Maximize"),
(view! { <Maximize2 /> }.into_any(), "Maximize 2"),
(view! { <Medal /> }.into_any(), "Medal"),
(view! { <Megaphone /> }.into_any(), "Megaphone"),
(view! { <MegaphoneOff /> }.into_any(), "Megaphone Off"),
(view! { <Meh /> }.into_any(), "Meh"),
(view! { <MemoryStick /> }.into_any(), "Memory Stick"),
(view! { <Menu /> }.into_any(), "Menu"),
(view! { <Merge /> }.into_any(), "Merge"),
(view! { <MessageCircle /> }.into_any(), "Message Circle"),
(view! { <MessageCircleCode /> }.into_any(), "Message Circle Code"),
(view! { <MessageCircleDashed /> }.into_any(), "Message Circle Dashed"),
(view! { <MessageCircleHeart /> }.into_any(), "Message Circle Heart"),
(view! { <MessageCircleMore /> }.into_any(), "Message Circle More"),
(view! { <MessageCircleOff /> }.into_any(), "Message Circle Off"),
(view! { <MessageCirclePlus /> }.into_any(), "Message Circle Plus"),
(view! { <MessageCircleQuestion /> }.into_any(), "Message Circle Question"),
(view! { <MessageCircleReply /> }.into_any(), "Message Circle Reply"),
(view! { <MessageCircleWarning /> }.into_any(), "Message Circle Warning"),
(view! { <MessageCircleX /> }.into_any(), "Message Circle X"),
(view! { <MessageSquare /> }.into_any(), "Message Square"),
(view! { <MessageSquareCode /> }.into_any(), "Message Square Code"),
(view! { <MessageSquareDashed /> }.into_any(), "Message Square Dashed"),
(view! { <MessageSquareDiff /> }.into_any(), "Message Square Diff"),
(view! { <MessageSquareDot /> }.into_any(), "Message Square Dot"),
(view! { <MessageSquareHeart /> }.into_any(), "Message Square Heart"),
(view! { <MessageSquareLock /> }.into_any(), "Message Square Lock"),
(view! { <MessageSquareMore /> }.into_any(), "Message Square More"),
(view! { <MessageSquareOff /> }.into_any(), "Message Square Off"),
(view! { <MessageSquarePlus /> }.into_any(), "Message Square Plus"),
(view! { <MessageSquareQuote /> }.into_any(), "Message Square Quote"),
(view! { <MessageSquareReply /> }.into_any(), "Message Square Reply"),
(view! { <MessageSquareShare /> }.into_any(), "Message Square Share"),
(view! { <MessageSquareText /> }.into_any(), "Message Square Text"),
(view! { <MessageSquareWarning /> }.into_any(), "Message Square Warning"),
(view! { <MessageSquareX /> }.into_any(), "Message Square X"),
(view! { <MessagesSquare /> }.into_any(), "Messages Square"),
(view! { <Mic /> }.into_any(), "Mic"),
(view! { <MicOff /> }.into_any(), "Mic Off"),
(view! { <MicVocal /> }.into_any(), "Mic Vocal"),
(view! { <Microchip /> }.into_any(), "Microchip"),
(view! { <Microscope /> }.into_any(), "Microscope"),
(view! { <Microwave /> }.into_any(), "Microwave"),
(view! { <Milestone /> }.into_any(), "Milestone"),
(view! { <Milk /> }.into_any(), "Milk"),
(view! { <MilkOff /> }.into_any(), "Milk Off"),
(view! { <Minimize /> }.into_any(), "Minimize"),
(view! { <Minimize2 /> }.into_any(), "Minimize 2"),
(view! { <Minus /> }.into_any(), "Minus"),
(view! { <Monitor /> }.into_any(), "Monitor"),
(view! { <MonitorCheck /> }.into_any(), "Monitor Check"),
(view! { <MonitorCog /> }.into_any(), "Monitor Cog"),
(view! { <MonitorDot /> }.into_any(), "Monitor Dot"),
(view! { <MonitorDown /> }.into_any(), "Monitor Down"),
(view! { <MonitorOff /> }.into_any(), "Monitor Off"),
(view! { <MonitorPause /> }.into_any(), "Monitor Pause"),
(view! { <MonitorPlay /> }.into_any(), "Monitor Play"),
(view! { <MonitorSmartphone /> }.into_any(), "Monitor Smartphone"),
(view! { <MonitorSpeaker /> }.into_any(), "Monitor Speaker"),
(view! { <MonitorStop /> }.into_any(), "Monitor Stop"),
(view! { <MonitorUp /> }.into_any(), "Monitor Up"),
(view! { <MonitorX /> }.into_any(), "Monitor X"),
(view! { <Moon /> }.into_any(), "Moon"),
(view! { <MoonStar /> }.into_any(), "Moon Star"),
(view! { <Mountain /> }.into_any(), "Mountain"),
(view! { <MountainSnow /> }.into_any(), "Mountain Snow"),
(view! { <Mouse /> }.into_any(), "Mouse"),
(view! { <MouseOff /> }.into_any(), "Mouse Off"),
(view! { <MousePointer /> }.into_any(), "Mouse Pointer"),
(view! { <MousePointer2 /> }.into_any(), "Mouse Pointer 2"),
(view! { <MousePointerBan /> }.into_any(), "Mouse Pointer Ban"),
(view! { <MousePointerClick /> }.into_any(), "Mouse Pointer Click"),
(view! { <Move /> }.into_any(), "Move"),
(view! { <Move3D /> }.into_any(), "Move 3 D"),
(view! { <MoveDiagonal /> }.into_any(), "Move Diagonal"),
(view! { <MoveDiagonal2 /> }.into_any(), "Move Diagonal 2"),
(view! { <MoveDown /> }.into_any(), "Move Down"),
(view! { <MoveDownLeft /> }.into_any(), "Move Down Left"),
(view! { <MoveDownRight /> }.into_any(), "Move Down Right"),
(view! { <MoveHorizontal /> }.into_any(), "Move Horizontal"),
(view! { <MoveLeft /> }.into_any(), "Move Left"),
(view! { <MoveRight /> }.into_any(), "Move Right"),
(view! { <MoveUp /> }.into_any(), "Move Up"),
(view! { <MoveUpLeft /> }.into_any(), "Move Up Left"),
(view! { <MoveUpRight /> }.into_any(), "Move Up Right"),
(view! { <MoveVertical /> }.into_any(), "Move Vertical"),
(view! { <Music /> }.into_any(), "Music"),
(view! { <Music2 /> }.into_any(), "Music 2"),
(view! { <Music3 /> }.into_any(), "Music 3"),
(view! { <Music4 /> }.into_any(), "Music 4"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsN() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Navigation /> }.into_any(), "Navigation"),
(view! { <Navigation2 /> }.into_any(), "Navigation 2"),
(view! { <Navigation2Off /> }.into_any(), "Navigation 2 Off"),
(view! { <NavigationOff /> }.into_any(), "Navigation Off"),
(view! { <Network /> }.into_any(), "Network"),
(view! { <Newspaper /> }.into_any(), "Newspaper"),
(view! { <Nfc /> }.into_any(), "Nfc"),
(view! { <Notebook /> }.into_any(), "Notebook"),
(view! { <NotebookPen /> }.into_any(), "Notebook Pen"),
(view! { <NotebookTabs /> }.into_any(), "Notebook Tabs"),
(view! { <NotebookText /> }.into_any(), "Notebook Text"),
(view! { <NotepadText /> }.into_any(), "Notepad Text"),
(view! { <NotepadTextDashed /> }.into_any(), "Notepad Text Dashed"),
(view! { <Nut /> }.into_any(), "Nut"),
(view! { <NutOff /> }.into_any(), "Nut Off"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsO() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Octagon /> }.into_any(), "Octagon"),
(view! { <OctagonAlert /> }.into_any(), "Octagon Alert"),
(view! { <OctagonMinus /> }.into_any(), "Octagon Minus"),
(view! { <OctagonPause /> }.into_any(), "Octagon Pause"),
(view! { <OctagonX /> }.into_any(), "Octagon X"),
(view! { <Omega /> }.into_any(), "Omega"),
(view! { <Option /> }.into_any(), "Option"),
(view! { <Orbit /> }.into_any(), "Orbit"),
(view! { <Origami /> }.into_any(), "Origami"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsP() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Package /> }.into_any(), "Package"),
(view! { <Package2 /> }.into_any(), "Package 2"),
(view! { <PackageCheck /> }.into_any(), "Package Check"),
(view! { <PackageMinus /> }.into_any(), "Package Minus"),
(view! { <PackageOpen /> }.into_any(), "Package Open"),
(view! { <PackagePlus /> }.into_any(), "Package Plus"),
(view! { <PackageSearch /> }.into_any(), "Package Search"),
(view! { <PackageX /> }.into_any(), "Package X"),
(view! { <PaintBucket /> }.into_any(), "Paint Bucket"),
(view! { <PaintRoller /> }.into_any(), "Paint Roller"),
(view! { <Paintbrush /> }.into_any(), "Paintbrush"),
(view! { <PaintbrushVertical /> }.into_any(), "Paintbrush Vertical"),
(view! { <Palette /> }.into_any(), "Palette"),
(view! { <PanelBottom /> }.into_any(), "Panel Bottom"),
(view! { <PanelBottomClose /> }.into_any(), "Panel Bottom Close"),
(view! { <PanelBottomDashed /> }.into_any(), "Panel Bottom Dashed"),
(view! { <PanelBottomOpen /> }.into_any(), "Panel Bottom Open"),
(view! { <PanelLeft /> }.into_any(), "Panel Left"),
(view! { <PanelLeftClose /> }.into_any(), "Panel Left Close"),
(view! { <PanelLeftDashed /> }.into_any(), "Panel Left Dashed"),
(view! { <PanelLeftOpen /> }.into_any(), "Panel Left Open"),
(view! { <PanelRight /> }.into_any(), "Panel Right"),
(view! { <PanelRightClose /> }.into_any(), "Panel Right Close"),
(view! { <PanelRightDashed /> }.into_any(), "Panel Right Dashed"),
(view! { <PanelRightOpen /> }.into_any(), "Panel Right Open"),
(view! { <PanelTop /> }.into_any(), "Panel Top"),
(view! { <PanelTopClose /> }.into_any(), "Panel Top Close"),
(view! { <PanelTopDashed /> }.into_any(), "Panel Top Dashed"),
(view! { <PanelTopOpen /> }.into_any(), "Panel Top Open"),
(view! { <PanelsLeftBottom /> }.into_any(), "Panels Left Bottom"),
(view! { <PanelsRightBottom /> }.into_any(), "Panels Right Bottom"),
(view! { <PanelsTopLeft /> }.into_any(), "Panels Top Left"),
(view! { <Paperclip /> }.into_any(), "Paperclip"),
(view! { <Parentheses /> }.into_any(), "Parentheses"),
(view! { <ParkingMeter /> }.into_any(), "Parking Meter"),
(view! { <PartyPopper /> }.into_any(), "Party Popper"),
(view! { <Pause /> }.into_any(), "Pause"),
(view! { <PawPrint /> }.into_any(), "Paw Print"),
(view! { <PcCase /> }.into_any(), "Pc Case"),
(view! { <Pen /> }.into_any(), "Pen"),
(view! { <PenLine /> }.into_any(), "Pen Line"),
(view! { <PenOff /> }.into_any(), "Pen Off"),
(view! { <PenTool /> }.into_any(), "Pen Tool"),
(view! { <Pencil /> }.into_any(), "Pencil"),
(view! { <PencilLine /> }.into_any(), "Pencil Line"),
(view! { <PencilOff /> }.into_any(), "Pencil Off"),
(view! { <PencilRuler /> }.into_any(), "Pencil Ruler"),
(view! { <Pentagon /> }.into_any(), "Pentagon"),
(view! { <Percent /> }.into_any(), "Percent"),
(view! { <PersonStanding /> }.into_any(), "Person Standing"),
(view! { <PhilippinePeso /> }.into_any(), "Philippine Peso"),
(view! { <Phone /> }.into_any(), "Phone"),
(view! { <PhoneCall /> }.into_any(), "Phone Call"),
(view! { <PhoneForwarded /> }.into_any(), "Phone Forwarded"),
(view! { <PhoneIncoming /> }.into_any(), "Phone Incoming"),
(view! { <PhoneMissed /> }.into_any(), "Phone Missed"),
(view! { <PhoneOff /> }.into_any(), "Phone Off"),
(view! { <PhoneOutgoing /> }.into_any(), "Phone Outgoing"),
(view! { <Pi /> }.into_any(), "Pi"),
(view! { <Piano /> }.into_any(), "Piano"),
(view! { <Pickaxe /> }.into_any(), "Pickaxe"),
(view! { <PictureInPicture /> }.into_any(), "Picture In Picture"),
(view! { <PictureInPicture2 /> }.into_any(), "Picture In Picture 2"),
(view! { <PiggyBank /> }.into_any(), "Piggy Bank"),
(view! { <Pilcrow /> }.into_any(), "Pilcrow"),
(view! { <PilcrowLeft /> }.into_any(), "Pilcrow Left"),
(view! { <PilcrowRight /> }.into_any(), "Pilcrow Right"),
(view! { <Pill /> }.into_any(), "Pill"),
(view! { <PillBottle /> }.into_any(), "Pill Bottle"),
(view! { <Pin /> }.into_any(), "Pin"),
(view! { <PinOff /> }.into_any(), "Pin Off"),
(view! { <Pipette /> }.into_any(), "Pipette"),
(view! { <Pizza /> }.into_any(), "Pizza"),
(view! { <Plane /> }.into_any(), "Plane"),
(view! { <PlaneLanding /> }.into_any(), "Plane Landing"),
(view! { <PlaneTakeoff /> }.into_any(), "Plane Takeoff"),
(view! { <Play /> }.into_any(), "Play"),
(view! { <Plug /> }.into_any(), "Plug"),
(view! { <Plug2 /> }.into_any(), "Plug 2"),
(view! { <PlugZap /> }.into_any(), "Plug Zap"),
(view! { <Plus /> }.into_any(), "Plus"),
(view! { <Pocket /> }.into_any(), "Pocket"),
(view! { <PocketKnife /> }.into_any(), "Pocket Knife"),
(view! { <Podcast /> }.into_any(), "Podcast"),
(view! { <Pointer /> }.into_any(), "Pointer"),
(view! { <PointerOff /> }.into_any(), "Pointer Off"),
(view! { <Popcorn /> }.into_any(), "Popcorn"),
(view! { <Popsicle /> }.into_any(), "Popsicle"),
(view! { <PoundSterling /> }.into_any(), "Pound Sterling"),
(view! { <Power /> }.into_any(), "Power"),
(view! { <PowerOff /> }.into_any(), "Power Off"),
(view! { <Presentation /> }.into_any(), "Presentation"),
(view! { <Printer /> }.into_any(), "Printer"),
(view! { <PrinterCheck /> }.into_any(), "Printer Check"),
(view! { <Projector /> }.into_any(), "Projector"),
(view! { <Proportions /> }.into_any(), "Proportions"),
(view! { <Puzzle /> }.into_any(), "Puzzle"),
(view! { <Pyramid /> }.into_any(), "Pyramid"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsQ() -> impl IntoView {
view! {
<For
each=move || [
(view! { <QrCode /> }.into_any(), "Qr Code"),
(view! { <Quote /> }.into_any(), "Quote"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsR() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Rabbit /> }.into_any(), "Rabbit"),
(view! { <Radar /> }.into_any(), "Radar"),
(view! { <Radiation /> }.into_any(), "Radiation"),
(view! { <Radical /> }.into_any(), "Radical"),
(view! { <Radio /> }.into_any(), "Radio"),
(view! { <RadioReceiver /> }.into_any(), "Radio Receiver"),
(view! { <RadioTower /> }.into_any(), "Radio Tower"),
(view! { <Radius /> }.into_any(), "Radius"),
(view! { <RailSymbol /> }.into_any(), "Rail Symbol"),
(view! { <Rainbow /> }.into_any(), "Rainbow"),
(view! { <Rat /> }.into_any(), "Rat"),
(view! { <Ratio /> }.into_any(), "Ratio"),
(view! { <Receipt /> }.into_any(), "Receipt"),
(view! { <ReceiptCent /> }.into_any(), "Receipt Cent"),
(view! { <ReceiptEuro /> }.into_any(), "Receipt Euro"),
(view! { <ReceiptIndianRupee /> }.into_any(), "Receipt Indian Rupee"),
(view! { <ReceiptJapaneseYen /> }.into_any(), "Receipt Japanese Yen"),
(view! { <ReceiptPoundSterling /> }.into_any(), "Receipt Pound Sterling"),
(view! { <ReceiptRussianRuble /> }.into_any(), "Receipt Russian Ruble"),
(view! { <ReceiptSwissFranc /> }.into_any(), "Receipt Swiss Franc"),
(view! { <ReceiptText /> }.into_any(), "Receipt Text"),
(view! { <RectangleEllipsis /> }.into_any(), "Rectangle Ellipsis"),
(view! { <RectangleHorizontal /> }.into_any(), "Rectangle Horizontal"),
(view! { <RectangleVertical /> }.into_any(), "Rectangle Vertical"),
(view! { <Recycle /> }.into_any(), "Recycle"),
(view! { <Redo /> }.into_any(), "Redo"),
(view! { <Redo2 /> }.into_any(), "Redo 2"),
(view! { <RedoDot /> }.into_any(), "Redo Dot"),
(view! { <RefreshCcw /> }.into_any(), "Refresh Ccw"),
(view! { <RefreshCcwDot /> }.into_any(), "Refresh Ccw Dot"),
(view! { <RefreshCw /> }.into_any(), "Refresh Cw"),
(view! { <RefreshCwOff /> }.into_any(), "Refresh Cw Off"),
(view! { <Refrigerator /> }.into_any(), "Refrigerator"),
(view! { <Regex /> }.into_any(), "Regex"),
(view! { <RemoveFormatting /> }.into_any(), "Remove Formatting"),
(view! { <Repeat /> }.into_any(), "Repeat"),
(view! { <Repeat1 /> }.into_any(), "Repeat 1"),
(view! { <Repeat2 /> }.into_any(), "Repeat 2"),
(view! { <Replace /> }.into_any(), "Replace"),
(view! { <ReplaceAll /> }.into_any(), "Replace All"),
(view! { <Reply /> }.into_any(), "Reply"),
(view! { <ReplyAll /> }.into_any(), "Reply All"),
(view! { <Rewind /> }.into_any(), "Rewind"),
(view! { <Ribbon /> }.into_any(), "Ribbon"),
(view! { <Rocket /> }.into_any(), "Rocket"),
(view! { <RockingChair /> }.into_any(), "Rocking Chair"),
(view! { <RollerCoaster /> }.into_any(), "Roller Coaster"),
(view! { <Rotate3D /> }.into_any(), "Rotate 3 D"),
(view! { <RotateCcw /> }.into_any(), "Rotate Ccw"),
(view! { <RotateCcwSquare /> }.into_any(), "Rotate Ccw Square"),
(view! { <RotateCw /> }.into_any(), "Rotate Cw"),
(view! { <RotateCwSquare /> }.into_any(), "Rotate Cw Square"),
(view! { <Route /> }.into_any(), "Route"),
(view! { <RouteOff /> }.into_any(), "Route Off"),
(view! { <Router /> }.into_any(), "Router"),
(view! { <Rows2 /> }.into_any(), "Rows 2"),
(view! { <Rows3 /> }.into_any(), "Rows 3"),
(view! { <Rows4 /> }.into_any(), "Rows 4"),
(view! { <Rss /> }.into_any(), "Rss"),
(view! { <Ruler /> }.into_any(), "Ruler"),
(view! { <RussianRuble /> }.into_any(), "Russian Ruble"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsS() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Sailboat /> }.into_any(), "Sailboat"),
(view! { <Salad /> }.into_any(), "Salad"),
(view! { <Sandwich /> }.into_any(), "Sandwich"),
(view! { <Satellite /> }.into_any(), "Satellite"),
(view! { <SatelliteDish /> }.into_any(), "Satellite Dish"),
(view! { <Save /> }.into_any(), "Save"),
(view! { <SaveAll /> }.into_any(), "Save All"),
(view! { <SaveOff /> }.into_any(), "Save Off"),
(view! { <Scale /> }.into_any(), "Scale"),
(view! { <Scale3D /> }.into_any(), "Scale 3 D"),
(view! { <Scaling /> }.into_any(), "Scaling"),
(view! { <Scan /> }.into_any(), "Scan"),
(view! { <ScanBarcode /> }.into_any(), "Scan Barcode"),
(view! { <ScanEye /> }.into_any(), "Scan Eye"),
(view! { <ScanFace /> }.into_any(), "Scan Face"),
(view! { <ScanHeart /> }.into_any(), "Scan Heart"),
(view! { <ScanLine /> }.into_any(), "Scan Line"),
(view! { <ScanQrCode /> }.into_any(), "Scan Qr Code"),
(view! { <ScanSearch /> }.into_any(), "Scan Search"),
(view! { <ScanText /> }.into_any(), "Scan Text"),
(view! { <School /> }.into_any(), "School"),
(view! { <Scissors /> }.into_any(), "Scissors"),
(view! { <ScissorsLineDashed /> }.into_any(), "Scissors Line Dashed"),
(view! { <ScreenShare /> }.into_any(), "Screen Share"),
(view! { <ScreenShareOff /> }.into_any(), "Screen Share Off"),
(view! { <Scroll /> }.into_any(), "Scroll"),
(view! { <ScrollText /> }.into_any(), "Scroll Text"),
(view! { <Search /> }.into_any(), "Search"),
(view! { <SearchCheck /> }.into_any(), "Search Check"),
(view! { <SearchCode /> }.into_any(), "Search Code"),
(view! { <SearchSlash /> }.into_any(), "Search Slash"),
(view! { <SearchX /> }.into_any(), "Search X"),
(view! { <Section /> }.into_any(), "Section"),
(view! { <Send /> }.into_any(), "Send"),
(view! { <SendHorizontal /> }.into_any(), "Send Horizontal"),
(view! { <SendToBack /> }.into_any(), "Send To Back"),
(view! { <SeparatorHorizontal /> }.into_any(), "Separator Horizontal"),
(view! { <SeparatorVertical /> }.into_any(), "Separator Vertical"),
(view! { <Server /> }.into_any(), "Server"),
(view! { <ServerCog /> }.into_any(), "Server Cog"),
(view! { <ServerCrash /> }.into_any(), "Server Crash"),
(view! { <ServerOff /> }.into_any(), "Server Off"),
(view! { <Settings /> }.into_any(), "Settings"),
(view! { <Settings2 /> }.into_any(), "Settings 2"),
(view! { <Shapes /> }.into_any(), "Shapes"),
(view! { <Share /> }.into_any(), "Share"),
(view! { <Share2 /> }.into_any(), "Share 2"),
(view! { <Sheet /> }.into_any(), "Sheet"),
(view! { <Shell /> }.into_any(), "Shell"),
(view! { <Shield /> }.into_any(), "Shield"),
(view! { <ShieldAlert /> }.into_any(), "Shield Alert"),
(view! { <ShieldBan /> }.into_any(), "Shield Ban"),
(view! { <ShieldCheck /> }.into_any(), "Shield Check"),
(view! { <ShieldEllipsis /> }.into_any(), "Shield Ellipsis"),
(view! { <ShieldHalf /> }.into_any(), "Shield Half"),
(view! { <ShieldMinus /> }.into_any(), "Shield Minus"),
(view! { <ShieldOff /> }.into_any(), "Shield Off"),
(view! { <ShieldPlus /> }.into_any(), "Shield Plus"),
(view! { <ShieldQuestion /> }.into_any(), "Shield Question"),
(view! { <ShieldX /> }.into_any(), "Shield X"),
(view! { <Ship /> }.into_any(), "Ship"),
(view! { <ShipWheel /> }.into_any(), "Ship Wheel"),
(view! { <Shirt /> }.into_any(), "Shirt"),
(view! { <ShoppingBag /> }.into_any(), "Shopping Bag"),
(view! { <ShoppingBasket /> }.into_any(), "Shopping Basket"),
(view! { <ShoppingCart /> }.into_any(), "Shopping Cart"),
(view! { <Shovel /> }.into_any(), "Shovel"),
(view! { <ShowerHead /> }.into_any(), "Shower Head"),
(view! { <Shrink /> }.into_any(), "Shrink"),
(view! { <Shrub /> }.into_any(), "Shrub"),
(view! { <Shuffle /> }.into_any(), "Shuffle"),
(view! { <Sigma /> }.into_any(), "Sigma"),
(view! { <Signal /> }.into_any(), "Signal"),
(view! { <SignalHigh /> }.into_any(), "Signal High"),
(view! { <SignalLow /> }.into_any(), "Signal Low"),
(view! { <SignalMedium /> }.into_any(), "Signal Medium"),
(view! { <SignalZero /> }.into_any(), "Signal Zero"),
(view! { <Signature /> }.into_any(), "Signature"),
(view! { <Signpost /> }.into_any(), "Signpost"),
(view! { <SignpostBig /> }.into_any(), "Signpost Big"),
(view! { <Siren /> }.into_any(), "Siren"),
(view! { <SkipBack /> }.into_any(), "Skip Back"),
(view! { <SkipForward /> }.into_any(), "Skip Forward"),
(view! { <Skull /> }.into_any(), "Skull"),
(view! { <Slack /> }.into_any(), "Slack"),
(view! { <Slash /> }.into_any(), "Slash"),
(view! { <Slice /> }.into_any(), "Slice"),
(view! { <SlidersHorizontal /> }.into_any(), "Sliders Horizontal"),
(view! { <SlidersVertical /> }.into_any(), "Sliders Vertical"),
(view! { <Smartphone /> }.into_any(), "Smartphone"),
(view! { <SmartphoneCharging /> }.into_any(), "Smartphone Charging"),
(view! { <SmartphoneNfc /> }.into_any(), "Smartphone Nfc"),
(view! { <Smile /> }.into_any(), "Smile"),
(view! { <SmilePlus /> }.into_any(), "Smile Plus"),
(view! { <Snail /> }.into_any(), "Snail"),
(view! { <Snowflake /> }.into_any(), "Snowflake"),
(view! { <Sofa /> }.into_any(), "Sofa"),
(view! { <Soup /> }.into_any(), "Soup"),
(view! { <Space /> }.into_any(), "Space"),
(view! { <Spade /> }.into_any(), "Spade"),
(view! { <Sparkle /> }.into_any(), "Sparkle"),
(view! { <Sparkles /> }.into_any(), "Sparkles"),
(view! { <Speaker /> }.into_any(), "Speaker"),
(view! { <Speech /> }.into_any(), "Speech"),
(view! { <SpellCheck /> }.into_any(), "Spell Check"),
(view! { <SpellCheck2 /> }.into_any(), "Spell Check 2"),
(view! { <Spline /> }.into_any(), "Spline"),
(view! { <Split /> }.into_any(), "Split"),
(view! { <SprayCan /> }.into_any(), "Spray Can"),
(view! { <Sprout /> }.into_any(), "Sprout"),
(view! { <Square /> }.into_any(), "Square"),
(view! { <SquareActivity /> }.into_any(), "Square Activity"),
(view! { <SquareArrowDown /> }.into_any(), "Square Arrow Down"),
(view! { <SquareArrowDownLeft /> }.into_any(), "Square Arrow Down Left"),
(view! { <SquareArrowDownRight /> }.into_any(), "Square Arrow Down Right"),
(view! { <SquareArrowLeft /> }.into_any(), "Square Arrow Left"),
(view! { <SquareArrowOutDownLeft /> }.into_any(), "Square Arrow Out Down Left"),
(view! { <SquareArrowOutDownRight /> }.into_any(), "Square Arrow Out Down Right"),
(view! { <SquareArrowOutUpLeft /> }.into_any(), "Square Arrow Out Up Left"),
(view! { <SquareArrowOutUpRight /> }.into_any(), "Square Arrow Out Up Right"),
(view! { <SquareArrowRight /> }.into_any(), "Square Arrow Right"),
(view! { <SquareArrowUp /> }.into_any(), "Square Arrow Up"),
(view! { <SquareArrowUpLeft /> }.into_any(), "Square Arrow Up Left"),
(view! { <SquareArrowUpRight /> }.into_any(), "Square Arrow Up Right"),
(view! { <SquareAsterisk /> }.into_any(), "Square Asterisk"),
(
view! { <SquareBottomDashedScissors /> }.into_any(),
"Square Bottom Dashed Scissors",
),
(view! { <SquareChartGantt /> }.into_any(), "Square Chart Gantt"),
(view! { <SquareCheck /> }.into_any(), "Square Check"),
(view! { <SquareCheckBig /> }.into_any(), "Square Check Big"),
(view! { <SquareChevronDown /> }.into_any(), "Square Chevron Down"),
(view! { <SquareChevronLeft /> }.into_any(), "Square Chevron Left"),
(view! { <SquareChevronRight /> }.into_any(), "Square Chevron Right"),
(view! { <SquareChevronUp /> }.into_any(), "Square Chevron Up"),
(view! { <SquareCode /> }.into_any(), "Square Code"),
(view! { <SquareDashed /> }.into_any(), "Square Dashed"),
(view! { <SquareDashedBottom /> }.into_any(), "Square Dashed Bottom"),
(view! { <SquareDashedBottomCode /> }.into_any(), "Square Dashed Bottom Code"),
(view! { <SquareDashedKanban /> }.into_any(), "Square Dashed Kanban"),
(view! { <SquareDashedMousePointer /> }.into_any(), "Square Dashed Mouse Pointer"),
(view! { <SquareDivide /> }.into_any(), "Square Divide"),
(view! { <SquareDot /> }.into_any(), "Square Dot"),
(view! { <SquareEqual /> }.into_any(), "Square Equal"),
(view! { <SquareFunction /> }.into_any(), "Square Function"),
(view! { <SquareKanban /> }.into_any(), "Square Kanban"),
(view! { <SquareLibrary /> }.into_any(), "Square Library"),
(view! { <SquareM /> }.into_any(), "Square M"),
(view! { <SquareMenu /> }.into_any(), "Square Menu"),
(view! { <SquareMinus /> }.into_any(), "Square Minus"),
(view! { <SquareMousePointer /> }.into_any(), "Square Mouse Pointer"),
(view! { <SquareParking /> }.into_any(), "Square Parking"),
(view! { <SquareParkingOff /> }.into_any(), "Square Parking Off"),
(view! { <SquarePen /> }.into_any(), "Square Pen"),
(view! { <SquarePercent /> }.into_any(), "Square Percent"),
(view! { <SquarePi /> }.into_any(), "Square Pi"),
(view! { <SquarePilcrow /> }.into_any(), "Square Pilcrow"),
(view! { <SquarePlay /> }.into_any(), "Square Play"),
(view! { <SquarePlus /> }.into_any(), "Square Plus"),
(view! { <SquarePower /> }.into_any(), "Square Power"),
(view! { <SquareRadical /> }.into_any(), "Square Radical"),
(view! { <SquareScissors /> }.into_any(), "Square Scissors"),
(view! { <SquareSigma /> }.into_any(), "Square Sigma"),
(view! { <SquareSlash /> }.into_any(), "Square Slash"),
(view! { <SquareSplitHorizontal /> }.into_any(), "Square Split Horizontal"),
(view! { <SquareSplitVertical /> }.into_any(), "Square Split Vertical"),
(view! { <SquareSquare /> }.into_any(), "Square Square"),
(view! { <SquareStack /> }.into_any(), "Square Stack"),
(view! { <SquareTerminal /> }.into_any(), "Square Terminal"),
(view! { <SquareUser /> }.into_any(), "Square User"),
(view! { <SquareUserRound /> }.into_any(), "Square User Round"),
(view! { <SquareX /> }.into_any(), "Square X"),
(view! { <Squircle /> }.into_any(), "Squircle"),
(view! { <Squirrel /> }.into_any(), "Squirrel"),
(view! { <Stamp /> }.into_any(), "Stamp"),
(view! { <Star /> }.into_any(), "Star"),
(view! { <StarHalf /> }.into_any(), "Star Half"),
(view! { <StarOff /> }.into_any(), "Star Off"),
(view! { <StepBack /> }.into_any(), "Step Back"),
(view! { <StepForward /> }.into_any(), "Step Forward"),
(view! { <Stethoscope /> }.into_any(), "Stethoscope"),
(view! { <Sticker /> }.into_any(), "Sticker"),
(view! { <StickyNote /> }.into_any(), "Sticky Note"),
(view! { <Store /> }.into_any(), "Store"),
(view! { <StretchHorizontal /> }.into_any(), "Stretch Horizontal"),
(view! { <StretchVertical /> }.into_any(), "Stretch Vertical"),
(view! { <Strikethrough /> }.into_any(), "Strikethrough"),
(view! { <Subscript /> }.into_any(), "Subscript"),
(view! { <Sun /> }.into_any(), "Sun"),
(view! { <SunDim /> }.into_any(), "Sun Dim"),
(view! { <SunMedium /> }.into_any(), "Sun Medium"),
(view! { <SunMoon /> }.into_any(), "Sun Moon"),
(view! { <SunSnow /> }.into_any(), "Sun Snow"),
(view! { <Sunrise /> }.into_any(), "Sunrise"),
(view! { <Sunset /> }.into_any(), "Sunset"),
(view! { <Superscript /> }.into_any(), "Superscript"),
(view! { <SwatchBook /> }.into_any(), "Swatch Book"),
(view! { <SwissFranc /> }.into_any(), "Swiss Franc"),
(view! { <SwitchCamera /> }.into_any(), "Switch Camera"),
(view! { <Sword /> }.into_any(), "Sword"),
(view! { <Swords /> }.into_any(), "Swords"),
(view! { <Syringe /> }.into_any(), "Syringe"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsT() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Table /> }.into_any(), "Table"),
(view! { <Table2 /> }.into_any(), "Table 2"),
(view! { <TableCellsMerge /> }.into_any(), "Table Cells Merge"),
(view! { <TableCellsSplit /> }.into_any(), "Table Cells Split"),
(view! { <TableColumnsSplit /> }.into_any(), "Table Columns Split"),
(view! { <TableOfContents /> }.into_any(), "Table Of Contents"),
(view! { <TableProperties /> }.into_any(), "Table Properties"),
(view! { <TableRowsSplit /> }.into_any(), "Table Rows Split"),
(view! { <Tablet /> }.into_any(), "Tablet"),
(view! { <TabletSmartphone /> }.into_any(), "Tablet Smartphone"),
(view! { <Tablets /> }.into_any(), "Tablets"),
(view! { <Tag /> }.into_any(), "Tag"),
(view! { <Tags /> }.into_any(), "Tags"),
(view! { <Tally1 /> }.into_any(), "Tally 1"),
(view! { <Tally2 /> }.into_any(), "Tally 2"),
(view! { <Tally3 /> }.into_any(), "Tally 3"),
(view! { <Tally4 /> }.into_any(), "Tally 4"),
(view! { <Tally5 /> }.into_any(), "Tally 5"),
(view! { <Tangent /> }.into_any(), "Tangent"),
(view! { <Target /> }.into_any(), "Target"),
(view! { <Telescope /> }.into_any(), "Telescope"),
(view! { <Tent /> }.into_any(), "Tent"),
(view! { <TentTree /> }.into_any(), "Tent Tree"),
(view! { <Terminal /> }.into_any(), "Terminal"),
(view! { <TestTube /> }.into_any(), "Test Tube"),
(view! { <TestTubeDiagonal /> }.into_any(), "Test Tube Diagonal"),
(view! { <TestTubes /> }.into_any(), "Test Tubes"),
(view! { <Text /> }.into_any(), "Text"),
(view! { <TextCursor /> }.into_any(), "Text Cursor"),
(view! { <TextCursorInput /> }.into_any(), "Text Cursor Input"),
(view! { <TextQuote /> }.into_any(), "Text Quote"),
(view! { <TextSearch /> }.into_any(), "Text Search"),
(view! { <TextSelect /> }.into_any(), "Text Select"),
(view! { <Theater /> }.into_any(), "Theater"),
(view! { <Thermometer /> }.into_any(), "Thermometer"),
(view! { <ThermometerSnowflake /> }.into_any(), "Thermometer Snowflake"),
(view! { <ThermometerSun /> }.into_any(), "Thermometer Sun"),
(view! { <ThumbsDown /> }.into_any(), "Thumbs Down"),
(view! { <ThumbsUp /> }.into_any(), "Thumbs Up"),
(view! { <Ticket /> }.into_any(), "Ticket"),
(view! { <TicketCheck /> }.into_any(), "Ticket Check"),
(view! { <TicketMinus /> }.into_any(), "Ticket Minus"),
(view! { <TicketPercent /> }.into_any(), "Ticket Percent"),
(view! { <TicketPlus /> }.into_any(), "Ticket Plus"),
(view! { <TicketSlash /> }.into_any(), "Ticket Slash"),
(view! { <TicketX /> }.into_any(), "Ticket X"),
(view! { <Tickets /> }.into_any(), "Tickets"),
(view! { <TicketsPlane /> }.into_any(), "Tickets Plane"),
(view! { <Timer /> }.into_any(), "Timer"),
(view! { <TimerOff /> }.into_any(), "Timer Off"),
(view! { <TimerReset /> }.into_any(), "Timer Reset"),
(view! { <ToggleLeft /> }.into_any(), "Toggle Left"),
(view! { <ToggleRight /> }.into_any(), "Toggle Right"),
(view! { <Toilet /> }.into_any(), "Toilet"),
(view! { <Tornado /> }.into_any(), "Tornado"),
(view! { <Torus /> }.into_any(), "Torus"),
(view! { <Touchpad /> }.into_any(), "Touchpad"),
(view! { <TouchpadOff /> }.into_any(), "Touchpad Off"),
(view! { <TowerControl /> }.into_any(), "Tower Control"),
(view! { <ToyBrick /> }.into_any(), "Toy Brick"),
(view! { <Tractor /> }.into_any(), "Tractor"),
(view! { <TrafficCone /> }.into_any(), "Traffic Cone"),
(view! { <TrainFront /> }.into_any(), "Train Front"),
(view! { <TrainFrontTunnel /> }.into_any(), "Train Front Tunnel"),
(view! { <TrainTrack /> }.into_any(), "Train Track"),
(view! { <TramFront /> }.into_any(), "Tram Front"),
(view! { <Trash /> }.into_any(), "Trash"),
(view! { <Trash2 /> }.into_any(), "Trash 2"),
(view! { <TreeDeciduous /> }.into_any(), "Tree Deciduous"),
(view! { <TreePalm /> }.into_any(), "Tree Palm"),
(view! { <TreePine /> }.into_any(), "Tree Pine"),
(view! { <Trees /> }.into_any(), "Trees"),
(view! { <Trello /> }.into_any(), "Trello"),
(view! { <TrendingDown /> }.into_any(), "Trending Down"),
(view! { <TrendingUp /> }.into_any(), "Trending Up"),
(view! { <TrendingUpDown /> }.into_any(), "Trending Up Down"),
(view! { <Triangle /> }.into_any(), "Triangle"),
(view! { <TriangleAlert /> }.into_any(), "Triangle Alert"),
(view! { <TriangleRight /> }.into_any(), "Triangle Right"),
(view! { <Trophy /> }.into_any(), "Trophy"),
(view! { <Truck /> }.into_any(), "Truck"),
(view! { <Turtle /> }.into_any(), "Turtle"),
(view! { <Tv /> }.into_any(), "Tv"),
(view! { <TvMinimal /> }.into_any(), "Tv Minimal"),
(view! { <TvMinimalPlay /> }.into_any(), "Tv Minimal Play"),
(view! { <Twitch /> }.into_any(), "Twitch"),
(view! { <Twitter /> }.into_any(), "Twitter"),
(view! { <Type /> }.into_any(), "Type"),
(view! { <TypeOutline /> }.into_any(), "Type Outline"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsU() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Umbrella /> }.into_any(), "Umbrella"),
(view! { <UmbrellaOff /> }.into_any(), "Umbrella Off"),
(view! { <Underline /> }.into_any(), "Underline"),
(view! { <Undo /> }.into_any(), "Undo"),
(view! { <Undo2 /> }.into_any(), "Undo 2"),
(view! { <UndoDot /> }.into_any(), "Undo Dot"),
(view! { <UnfoldHorizontal /> }.into_any(), "Unfold Horizontal"),
(view! { <UnfoldVertical /> }.into_any(), "Unfold Vertical"),
(view! { <Ungroup /> }.into_any(), "Ungroup"),
(view! { <University /> }.into_any(), "University"),
(view! { <Unlink /> }.into_any(), "Unlink"),
(view! { <Unlink2 /> }.into_any(), "Unlink 2"),
(view! { <Unplug /> }.into_any(), "Unplug"),
(view! { <Upload /> }.into_any(), "Upload"),
(view! { <Usb /> }.into_any(), "Usb"),
(view! { <User /> }.into_any(), "User"),
(view! { <UserCheck /> }.into_any(), "User Check"),
(view! { <UserCog /> }.into_any(), "User Cog"),
(view! { <UserMinus /> }.into_any(), "User Minus"),
(view! { <UserPen /> }.into_any(), "User Pen"),
(view! { <UserPlus /> }.into_any(), "User Plus"),
(view! { <UserRound /> }.into_any(), "User Round"),
(view! { <UserRoundCheck /> }.into_any(), "User Round Check"),
(view! { <UserRoundCog /> }.into_any(), "User Round Cog"),
(view! { <UserRoundMinus /> }.into_any(), "User Round Minus"),
(view! { <UserRoundPen /> }.into_any(), "User Round Pen"),
(view! { <UserRoundPlus /> }.into_any(), "User Round Plus"),
(view! { <UserRoundSearch /> }.into_any(), "User Round Search"),
(view! { <UserRoundX /> }.into_any(), "User Round X"),
(view! { <UserSearch /> }.into_any(), "User Search"),
(view! { <UserX /> }.into_any(), "User X"),
(view! { <Users /> }.into_any(), "Users"),
(view! { <UsersRound /> }.into_any(), "Users Round"),
(view! { <Utensils /> }.into_any(), "Utensils"),
(view! { <UtensilsCrossed /> }.into_any(), "Utensils Crossed"),
(view! { <UtilityPole /> }.into_any(), "Utility Pole"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsV() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Variable /> }.into_any(), "Variable"),
(view! { <Vault /> }.into_any(), "Vault"),
(view! { <Vegan /> }.into_any(), "Vegan"),
(view! { <VenetianMask /> }.into_any(), "Venetian Mask"),
(view! { <Vibrate /> }.into_any(), "Vibrate"),
(view! { <VibrateOff /> }.into_any(), "Vibrate Off"),
(view! { <Video /> }.into_any(), "Video"),
(view! { <VideoOff /> }.into_any(), "Video Off"),
(view! { <Videotape /> }.into_any(), "Videotape"),
(view! { <View /> }.into_any(), "View"),
(view! { <Voicemail /> }.into_any(), "Voicemail"),
(view! { <Volleyball /> }.into_any(), "Volleyball"),
(view! { <Volume /> }.into_any(), "Volume"),
(view! { <Volume1 /> }.into_any(), "Volume 1"),
(view! { <Volume2 /> }.into_any(), "Volume 2"),
(view! { <VolumeOff /> }.into_any(), "Volume Off"),
(view! { <VolumeX /> }.into_any(), "Volume X"),
(view! { <Vote /> }.into_any(), "Vote"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsW() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Wallet /> }.into_any(), "Wallet"),
(view! { <WalletCards /> }.into_any(), "Wallet Cards"),
(view! { <WalletMinimal /> }.into_any(), "Wallet Minimal"),
(view! { <Wallpaper /> }.into_any(), "Wallpaper"),
(view! { <Wand /> }.into_any(), "Wand"),
(view! { <WandSparkles /> }.into_any(), "Wand Sparkles"),
(view! { <Warehouse /> }.into_any(), "Warehouse"),
(view! { <WashingMachine /> }.into_any(), "Washing Machine"),
(view! { <Watch /> }.into_any(), "Watch"),
(view! { <Waves /> }.into_any(), "Waves"),
(view! { <WavesLadder /> }.into_any(), "Waves Ladder"),
(view! { <Waypoints /> }.into_any(), "Waypoints"),
(view! { <Webcam /> }.into_any(), "Webcam"),
(view! { <Webhook /> }.into_any(), "Webhook"),
(view! { <WebhookOff /> }.into_any(), "Webhook Off"),
(view! { <Weight /> }.into_any(), "Weight"),
(view! { <Wheat /> }.into_any(), "Wheat"),
(view! { <WheatOff /> }.into_any(), "Wheat Off"),
(view! { <WholeWord /> }.into_any(), "Whole Word"),
(view! { <Wifi /> }.into_any(), "Wifi"),
(view! { <WifiHigh /> }.into_any(), "Wifi High"),
(view! { <WifiLow /> }.into_any(), "Wifi Low"),
(view! { <WifiOff /> }.into_any(), "Wifi Off"),
(view! { <WifiZero /> }.into_any(), "Wifi Zero"),
(view! { <Wind /> }.into_any(), "Wind"),
(view! { <WindArrowDown /> }.into_any(), "Wind Arrow Down"),
(view! { <Wine /> }.into_any(), "Wine"),
(view! { <WineOff /> }.into_any(), "Wine Off"),
(view! { <Workflow /> }.into_any(), "Workflow"),
(view! { <Worm /> }.into_any(), "Worm"),
(view! { <WrapText /> }.into_any(), "Wrap Text"),
(view! { <Wrench /> }.into_any(), "Wrench"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsX() -> impl IntoView {
view! {
<For
each=move || [(view! { <X /> }.into_any(), "X")]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsY() -> impl IntoView {
view! {
<For
each=move || [(view! { <Youtube /> }.into_any(), "Youtube")]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsZ() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Zap /> }.into_any(), "Zap"),
(view! { <ZapOff /> }.into_any(), "Zap Off"),
(view! { <ZoomIn /> }.into_any(), "Zoom In"),
(view! { <ZoomOut /> }.into_any(), "Zoom Out"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
Lucide Yew
Implementation of the Lucide icon library for Yew applications.
Installation
Install the icons from your command line.
cargo add lucide-yew
Usage
use lucide_yew::Camera;
use yew::prelude::*;
#[component]
fn App() -> Html {
html! {
<Camera color="red" size=48 />
}
}Props
| Name | Type | Default |
|---|---|---|
size | usize | 24 |
color | String | "currentColor" |
fill | String | "none" |
stroke_width | usize | 2 |
absolute_stroke_width | bool | false |
Icons
use lucide_yew::{Component, *};
use yew::prelude::*;
#[function_component]
pub fn Icons() -> Html {
html! {
<div class="w-full max-w-80 py-4">
<IconsA />
<IconsB />
<IconsC />
<IconsD />
<IconsE />
<IconsF />
<IconsG />
<IconsH />
<IconsI />
<IconsJ />
<IconsK />
<IconsL />
<IconsM />
<IconsN />
<IconsO />
<IconsP />
<IconsQ />
<IconsR />
<IconsS />
<IconsT />
<IconsU />
<IconsV />
<IconsW />
<IconsX />
<IconsY />
<IconsZ />
</div>
}
}
#[function_component]
pub fn IconsA() -> Html {
let icons = [
(html! { <AArrowDown /> }, "A Arrow Down"),
(html! { <AArrowUp /> }, "A Arrow Up"),
(html! { <ALargeSmall /> }, "A Large Small"),
(html! { <Accessibility /> }, "Accessibility"),
(html! { <Activity /> }, "Activity"),
(html! { <AirVent /> }, "Air Vent"),
(html! { <Airplay /> }, "Airplay"),
(html! { <AlarmClock /> }, "Alarm Clock"),
(html! { <AlarmClockCheck /> }, "Alarm Clock Check"),
(html! { <AlarmClockMinus /> }, "Alarm Clock Minus"),
(html! { <AlarmClockOff /> }, "Alarm Clock Off"),
(html! { <AlarmClockPlus /> }, "Alarm Clock Plus"),
(html! { <AlarmSmoke /> }, "Alarm Smoke"),
(html! { <Album /> }, "Album"),
(html! { <AlignCenter /> }, "Align Center"),
(
html! { <AlignCenterHorizontal /> },
"Align Center Horizontal",
),
(html! { <AlignCenterVertical /> }, "Align Center Vertical"),
(html! { <AlignEndHorizontal /> }, "Align End Horizontal"),
(html! { <AlignEndVertical /> }, "Align End Vertical"),
(
html! { <AlignHorizontalDistributeCenter /> },
"Align Horizontal Distribute Center",
),
(
html! { <AlignHorizontalDistributeEnd /> },
"Align Horizontal Distribute End",
),
(
html! { <AlignHorizontalDistributeStart /> },
"Align Horizontal Distribute Start",
),
(
html! { <AlignHorizontalJustifyCenter /> },
"Align Horizontal Justify Center",
),
(
html! { <AlignHorizontalJustifyEnd /> },
"Align Horizontal Justify End",
),
(
html! { <AlignHorizontalJustifyStart /> },
"Align Horizontal Justify Start",
),
(
html! { <AlignHorizontalSpaceAround /> },
"Align Horizontal Space Around",
),
(
html! { <AlignHorizontalSpaceBetween /> },
"Align Horizontal Space Between",
),
(html! { <AlignJustify /> }, "Align Justify"),
(html! { <AlignLeft /> }, "Align Left"),
(html! { <AlignRight /> }, "Align Right"),
(html! { <AlignStartHorizontal /> }, "Align Start Horizontal"),
(html! { <AlignStartVertical /> }, "Align Start Vertical"),
(
html! { <AlignVerticalDistributeCenter /> },
"Align Vertical Distribute Center",
),
(
html! { <AlignVerticalDistributeEnd /> },
"Align Vertical Distribute End",
),
(
html! { <AlignVerticalDistributeStart /> },
"Align Vertical Distribute Start",
),
(
html! { <AlignVerticalJustifyCenter /> },
"Align Vertical Justify Center",
),
(
html! { <AlignVerticalJustifyEnd /> },
"Align Vertical Justify End",
),
(
html! { <AlignVerticalJustifyStart /> },
"Align Vertical Justify Start",
),
(
html! { <AlignVerticalSpaceAround /> },
"Align Vertical Space Around",
),
(
html! { <AlignVerticalSpaceBetween /> },
"Align Vertical Space Between",
),
(html! { <Ambulance /> }, "Ambulance"),
(html! { <Ampersand /> }, "Ampersand"),
(html! { <Ampersands /> }, "Ampersands"),
(html! { <Amphora /> }, "Amphora"),
(html! { <Anchor /> }, "Anchor"),
(html! { <Angry /> }, "Angry"),
(html! { <Annoyed /> }, "Annoyed"),
(html! { <Antenna /> }, "Antenna"),
(html! { <Anvil /> }, "Anvil"),
(html! { <Aperture /> }, "Aperture"),
(html! { <AppWindow /> }, "App Window"),
(html! { <AppWindowMac /> }, "App Window Mac"),
(html! { <Apple /> }, "Apple"),
(html! { <Archive /> }, "Archive"),
(html! { <ArchiveRestore /> }, "Archive Restore"),
(html! { <ArchiveX /> }, "Archive X"),
(html! { <Armchair /> }, "Armchair"),
(html! { <ArrowBigDown /> }, "Arrow Big Down"),
(html! { <ArrowBigDownDash /> }, "Arrow Big Down Dash"),
(html! { <ArrowBigLeft /> }, "Arrow Big Left"),
(html! { <ArrowBigLeftDash /> }, "Arrow Big Left Dash"),
(html! { <ArrowBigRight /> }, "Arrow Big Right"),
(html! { <ArrowBigRightDash /> }, "Arrow Big Right Dash"),
(html! { <ArrowBigUp /> }, "Arrow Big Up"),
(html! { <ArrowBigUpDash /> }, "Arrow Big Up Dash"),
(html! { <ArrowDown /> }, "Arrow Down"),
(html! { <ArrowDown01 /> }, "Arrow Down 01"),
(html! { <ArrowDown10 /> }, "Arrow Down 10"),
(html! { <ArrowDownAZ /> }, "Arrow Down Az"),
(html! { <ArrowDownFromLine /> }, "Arrow Down From Line"),
(html! { <ArrowDownLeft /> }, "Arrow Down Left"),
(html! { <ArrowDownNarrowWide /> }, "Arrow Down Narrow Wide"),
(html! { <ArrowDownRight /> }, "Arrow Down Right"),
(html! { <ArrowDownToDot /> }, "Arrow Down To Dot"),
(html! { <ArrowDownToLine /> }, "Arrow Down To Line"),
(html! { <ArrowDownUp /> }, "Arrow Down Up"),
(html! { <ArrowDownWideNarrow /> }, "Arrow Down Wide Narrow"),
(html! { <ArrowDownZA /> }, "Arrow Down Za"),
(html! { <ArrowLeft /> }, "Arrow Left"),
(html! { <ArrowLeftFromLine /> }, "Arrow Left From Line"),
(html! { <ArrowLeftRight /> }, "Arrow Left Right"),
(html! { <ArrowLeftToLine /> }, "Arrow Left To Line"),
(html! { <ArrowRight /> }, "Arrow Right"),
(html! { <ArrowRightFromLine /> }, "Arrow Right From Line"),
(html! { <ArrowRightLeft /> }, "Arrow Right Left"),
(html! { <ArrowRightToLine /> }, "Arrow Right To Line"),
(html! { <ArrowUp /> }, "Arrow Up"),
(html! { <ArrowUp01 /> }, "Arrow Up 01"),
(html! { <ArrowUp10 /> }, "Arrow Up 10"),
(html! { <ArrowUpAZ /> }, "Arrow Up Az"),
(html! { <ArrowUpDown /> }, "Arrow Up Down"),
(html! { <ArrowUpFromDot /> }, "Arrow Up From Dot"),
(html! { <ArrowUpFromLine /> }, "Arrow Up From Line"),
(html! { <ArrowUpLeft /> }, "Arrow Up Left"),
(html! { <ArrowUpNarrowWide /> }, "Arrow Up Narrow Wide"),
(html! { <ArrowUpRight /> }, "Arrow Up Right"),
(html! { <ArrowUpToLine /> }, "Arrow Up To Line"),
(html! { <ArrowUpWideNarrow /> }, "Arrow Up Wide Narrow"),
(html! { <ArrowUpZA /> }, "Arrow Up Za"),
(html! { <ArrowsUpFromLine /> }, "Arrows Up From Line"),
(html! { <Asterisk /> }, "Asterisk"),
(html! { <AtSign /> }, "At Sign"),
(html! { <Atom /> }, "Atom"),
(html! { <AudioLines /> }, "Audio Lines"),
(html! { <AudioWaveform /> }, "Audio Waveform"),
(html! { <Award /> }, "Award"),
(html! { <Axe /> }, "Axe"),
(html! { <Axis3D /> }, "Axis 3 D"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsB() -> Html {
let icons = [
(html! { <Baby /> }, "Baby"),
(html! { <Backpack /> }, "Backpack"),
(html! { <Badge /> }, "Badge"),
(html! { <BadgeAlert /> }, "Badge Alert"),
(html! { <BadgeCent /> }, "Badge Cent"),
(html! { <BadgeCheck /> }, "Badge Check"),
(html! { <BadgeDollarSign /> }, "Badge Dollar Sign"),
(html! { <BadgeEuro /> }, "Badge Euro"),
(html! { <BadgeHelp /> }, "Badge Help"),
(html! { <BadgeIndianRupee /> }, "Badge Indian Rupee"),
(html! { <BadgeInfo /> }, "Badge Info"),
(html! { <BadgeJapaneseYen /> }, "Badge Japanese Yen"),
(html! { <BadgeMinus /> }, "Badge Minus"),
(html! { <BadgePercent /> }, "Badge Percent"),
(html! { <BadgePlus /> }, "Badge Plus"),
(html! { <BadgePoundSterling /> }, "Badge Pound Sterling"),
(html! { <BadgeRussianRuble /> }, "Badge Russian Ruble"),
(html! { <BadgeSwissFranc /> }, "Badge Swiss Franc"),
(html! { <BadgeX /> }, "Badge X"),
(html! { <BaggageClaim /> }, "Baggage Claim"),
(html! { <Ban /> }, "Ban"),
(html! { <Banana /> }, "Banana"),
(html! { <Bandage /> }, "Bandage"),
(html! { <Banknote /> }, "Banknote"),
(html! { <Barcode /> }, "Barcode"),
(html! { <Baseline /> }, "Baseline"),
(html! { <Bath /> }, "Bath"),
(html! { <Battery /> }, "Battery"),
(html! { <BatteryCharging /> }, "Battery Charging"),
(html! { <BatteryFull /> }, "Battery Full"),
(html! { <BatteryLow /> }, "Battery Low"),
(html! { <BatteryMedium /> }, "Battery Medium"),
(html! { <BatteryWarning /> }, "Battery Warning"),
(html! { <Beaker /> }, "Beaker"),
(html! { <Bean /> }, "Bean"),
(html! { <BeanOff /> }, "Bean Off"),
(html! { <Bed /> }, "Bed"),
(html! { <BedDouble /> }, "Bed Double"),
(html! { <BedSingle /> }, "Bed Single"),
(html! { <Beef /> }, "Beef"),
(html! { <Beer /> }, "Beer"),
(html! { <BeerOff /> }, "Beer Off"),
(html! { <Bell /> }, "Bell"),
(html! { <BellDot /> }, "Bell Dot"),
(html! { <BellElectric /> }, "Bell Electric"),
(html! { <BellMinus /> }, "Bell Minus"),
(html! { <BellOff /> }, "Bell Off"),
(html! { <BellPlus /> }, "Bell Plus"),
(html! { <BellRing /> }, "Bell Ring"),
(html! { <BetweenHorizontalEnd /> }, "Between Horizontal End"),
(
html! { <BetweenHorizontalStart /> },
"Between Horizontal Start",
),
(html! { <BetweenVerticalEnd /> }, "Between Vertical End"),
(html! { <BetweenVerticalStart /> }, "Between Vertical Start"),
(html! { <BicepsFlexed /> }, "Biceps Flexed"),
(html! { <Bike /> }, "Bike"),
(html! { <Binary /> }, "Binary"),
(html! { <Binoculars /> }, "Binoculars"),
(html! { <Biohazard /> }, "Biohazard"),
(html! { <Bird /> }, "Bird"),
(html! { <Bitcoin /> }, "Bitcoin"),
(html! { <Blend /> }, "Blend"),
(html! { <Blinds /> }, "Blinds"),
(html! { <Blocks /> }, "Blocks"),
(html! { <Bluetooth /> }, "Bluetooth"),
(html! { <BluetoothConnected /> }, "Bluetooth Connected"),
(html! { <BluetoothOff /> }, "Bluetooth Off"),
(html! { <BluetoothSearching /> }, "Bluetooth Searching"),
(html! { <Bold /> }, "Bold"),
(html! { <Bolt /> }, "Bolt"),
(html! { <Bomb /> }, "Bomb"),
(html! { <Bone /> }, "Bone"),
(html! { <Book /> }, "Book"),
(html! { <BookA /> }, "Book A"),
(html! { <BookAudio /> }, "Book Audio"),
(html! { <BookCheck /> }, "Book Check"),
(html! { <BookCopy /> }, "Book Copy"),
(html! { <BookDashed /> }, "Book Dashed"),
(html! { <BookDown /> }, "Book Down"),
(html! { <BookHeadphones /> }, "Book Headphones"),
(html! { <BookHeart /> }, "Book Heart"),
(html! { <BookImage /> }, "Book Image"),
(html! { <BookKey /> }, "Book Key"),
(html! { <BookLock /> }, "Book Lock"),
(html! { <BookMarked /> }, "Book Marked"),
(html! { <BookMinus /> }, "Book Minus"),
(html! { <BookOpen /> }, "Book Open"),
(html! { <BookOpenCheck /> }, "Book Open Check"),
(html! { <BookOpenText /> }, "Book Open Text"),
(html! { <BookPlus /> }, "Book Plus"),
(html! { <BookText /> }, "Book Text"),
(html! { <BookType /> }, "Book Type"),
(html! { <BookUp /> }, "Book Up"),
(html! { <BookUp2 /> }, "Book Up 2"),
(html! { <BookUser /> }, "Book User"),
(html! { <BookX /> }, "Book X"),
(html! { <Bookmark /> }, "Bookmark"),
(html! { <BookmarkCheck /> }, "Bookmark Check"),
(html! { <BookmarkMinus /> }, "Bookmark Minus"),
(html! { <BookmarkPlus /> }, "Bookmark Plus"),
(html! { <BookmarkX /> }, "Bookmark X"),
(html! { <BoomBox /> }, "Boom Box"),
(html! { <Bot /> }, "Bot"),
(html! { <BotMessageSquare /> }, "Bot Message Square"),
(html! { <BotOff /> }, "Bot Off"),
(html! { <Box /> }, "Box"),
(html! { <Boxes /> }, "Boxes"),
(html! { <Braces /> }, "Braces"),
(html! { <Brackets /> }, "Brackets"),
(html! { <Brain /> }, "Brain"),
(html! { <BrainCircuit /> }, "Brain Circuit"),
(html! { <BrainCog /> }, "Brain Cog"),
(html! { <BrickWall /> }, "Brick Wall"),
(html! { <Briefcase /> }, "Briefcase"),
(html! { <BriefcaseBusiness /> }, "Briefcase Business"),
(
html! { <BriefcaseConveyorBelt /> },
"Briefcase Conveyor Belt",
),
(html! { <BriefcaseMedical /> }, "Briefcase Medical"),
(html! { <BringToFront /> }, "Bring To Front"),
(html! { <Brush /> }, "Brush"),
(html! { <Bug /> }, "Bug"),
(html! { <BugOff /> }, "Bug Off"),
(html! { <BugPlay /> }, "Bug Play"),
(html! { <Building /> }, "Building"),
(html! { <Building2 /> }, "Building 2"),
(html! { <Bus /> }, "Bus"),
(html! { <BusFront /> }, "Bus Front"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsC() -> Html {
let icons = [
(html! { <Cable /> }, "Cable"),
(html! { <CableCar /> }, "Cable Car"),
(html! { <Cake /> }, "Cake"),
(html! { <CakeSlice /> }, "Cake Slice"),
(html! { <Calculator /> }, "Calculator"),
(html! { <Calendar /> }, "Calendar"),
(html! { <Calendar1 /> }, "Calendar 1"),
(html! { <CalendarArrowDown /> }, "Calendar Arrow Down"),
(html! { <CalendarArrowUp /> }, "Calendar Arrow Up"),
(html! { <CalendarCheck /> }, "Calendar Check"),
(html! { <CalendarCheck2 /> }, "Calendar Check 2"),
(html! { <CalendarClock /> }, "Calendar Clock"),
(html! { <CalendarCog /> }, "Calendar Cog"),
(html! { <CalendarDays /> }, "Calendar Days"),
(html! { <CalendarFold /> }, "Calendar Fold"),
(html! { <CalendarHeart /> }, "Calendar Heart"),
(html! { <CalendarMinus /> }, "Calendar Minus"),
(html! { <CalendarMinus2 /> }, "Calendar Minus 2"),
(html! { <CalendarOff /> }, "Calendar Off"),
(html! { <CalendarPlus /> }, "Calendar Plus"),
(html! { <CalendarPlus2 /> }, "Calendar Plus 2"),
(html! { <CalendarRange /> }, "Calendar Range"),
(html! { <CalendarSearch /> }, "Calendar Search"),
(html! { <CalendarSync /> }, "Calendar Sync"),
(html! { <CalendarX /> }, "Calendar X"),
(html! { <CalendarX2 /> }, "Calendar X 2"),
(html! { <Camera /> }, "Camera"),
(html! { <CameraOff /> }, "Camera Off"),
(html! { <Candy /> }, "Candy"),
(html! { <CandyCane /> }, "Candy Cane"),
(html! { <CandyOff /> }, "Candy Off"),
(html! { <Cannabis /> }, "Cannabis"),
(html! { <Captions /> }, "Captions"),
(html! { <CaptionsOff /> }, "Captions Off"),
(html! { <Car /> }, "Car"),
(html! { <CarFront /> }, "Car Front"),
(html! { <CarTaxiFront /> }, "Car Taxi Front"),
(html! { <Caravan /> }, "Caravan"),
(html! { <Carrot /> }, "Carrot"),
(html! { <CaseLower /> }, "Case Lower"),
(html! { <CaseSensitive /> }, "Case Sensitive"),
(html! { <CaseUpper /> }, "Case Upper"),
(html! { <CassetteTape /> }, "Cassette Tape"),
(html! { <Cast /> }, "Cast"),
(html! { <Castle /> }, "Castle"),
(html! { <Cat /> }, "Cat"),
(html! { <Cctv /> }, "Cctv"),
(html! { <ChartArea /> }, "Chart Area"),
(html! { <ChartBar /> }, "Chart Bar"),
(html! { <ChartBarBig /> }, "Chart Bar Big"),
(html! { <ChartBarDecreasing /> }, "Chart Bar Decreasing"),
(html! { <ChartBarIncreasing /> }, "Chart Bar Increasing"),
(html! { <ChartBarStacked /> }, "Chart Bar Stacked"),
(html! { <ChartCandlestick /> }, "Chart Candlestick"),
(html! { <ChartColumn /> }, "Chart Column"),
(html! { <ChartColumnBig /> }, "Chart Column Big"),
(
html! { <ChartColumnDecreasing /> },
"Chart Column Decreasing",
),
(
html! { <ChartColumnIncreasing /> },
"Chart Column Increasing",
),
(html! { <ChartColumnStacked /> }, "Chart Column Stacked"),
(html! { <ChartGantt /> }, "Chart Gantt"),
(html! { <ChartLine /> }, "Chart Line"),
(html! { <ChartNetwork /> }, "Chart Network"),
(html! { <ChartNoAxesColumn /> }, "Chart No Axes Column"),
(
html! { <ChartNoAxesColumnDecreasing /> },
"Chart No Axes Column Decreasing",
),
(
html! { <ChartNoAxesColumnIncreasing /> },
"Chart No Axes Column Increasing",
),
(html! { <ChartNoAxesCombined /> }, "Chart No Axes Combined"),
(html! { <ChartNoAxesGantt /> }, "Chart No Axes Gantt"),
(html! { <ChartPie /> }, "Chart Pie"),
(html! { <ChartScatter /> }, "Chart Scatter"),
(html! { <ChartSpline /> }, "Chart Spline"),
(html! { <Check /> }, "Check"),
(html! { <CheckCheck /> }, "Check Check"),
(html! { <ChefHat /> }, "Chef Hat"),
(html! { <Cherry /> }, "Cherry"),
(html! { <ChevronDown /> }, "Chevron Down"),
(html! { <ChevronFirst /> }, "Chevron First"),
(html! { <ChevronLast /> }, "Chevron Last"),
(html! { <ChevronLeft /> }, "Chevron Left"),
(html! { <ChevronRight /> }, "Chevron Right"),
(html! { <ChevronUp /> }, "Chevron Up"),
(html! { <ChevronsDown /> }, "Chevrons Down"),
(html! { <ChevronsDownUp /> }, "Chevrons Down Up"),
(html! { <ChevronsLeft /> }, "Chevrons Left"),
(html! { <ChevronsLeftRight /> }, "Chevrons Left Right"),
(
html! { <ChevronsLeftRightEllipsis /> },
"Chevrons Left Right Ellipsis",
),
(html! { <ChevronsRight /> }, "Chevrons Right"),
(html! { <ChevronsRightLeft /> }, "Chevrons Right Left"),
(html! { <ChevronsUp /> }, "Chevrons Up"),
(html! { <ChevronsUpDown /> }, "Chevrons Up Down"),
(html! { <Chrome /> }, "Chrome"),
(html! { <Church /> }, "Church"),
(html! { <Cigarette /> }, "Cigarette"),
(html! { <CigaretteOff /> }, "Cigarette Off"),
(html! { <Circle /> }, "Circle"),
(html! { <CircleAlert /> }, "Circle Alert"),
(html! { <CircleArrowDown /> }, "Circle Arrow Down"),
(html! { <CircleArrowLeft /> }, "Circle Arrow Left"),
(
html! { <CircleArrowOutDownLeft /> },
"Circle Arrow Out Down Left",
),
(
html! { <CircleArrowOutDownRight /> },
"Circle Arrow Out Down Right",
),
(
html! { <CircleArrowOutUpLeft /> },
"Circle Arrow Out Up Left",
),
(
html! { <CircleArrowOutUpRight /> },
"Circle Arrow Out Up Right",
),
(html! { <CircleArrowRight /> }, "Circle Arrow Right"),
(html! { <CircleArrowUp /> }, "Circle Arrow Up"),
(html! { <CircleCheck /> }, "Circle Check"),
(html! { <CircleCheckBig /> }, "Circle Check Big"),
(html! { <CircleChevronDown /> }, "Circle Chevron Down"),
(html! { <CircleChevronLeft /> }, "Circle Chevron Left"),
(html! { <CircleChevronRight /> }, "Circle Chevron Right"),
(html! { <CircleChevronUp /> }, "Circle Chevron Up"),
(html! { <CircleDashed /> }, "Circle Dashed"),
(html! { <CircleDivide /> }, "Circle Divide"),
(html! { <CircleDollarSign /> }, "Circle Dollar Sign"),
(html! { <CircleDot /> }, "Circle Dot"),
(html! { <CircleDotDashed /> }, "Circle Dot Dashed"),
(html! { <CircleEllipsis /> }, "Circle Ellipsis"),
(html! { <CircleEqual /> }, "Circle Equal"),
(html! { <CircleFadingArrowUp /> }, "Circle Fading Arrow Up"),
(html! { <CircleFadingPlus /> }, "Circle Fading Plus"),
(html! { <CircleGauge /> }, "Circle Gauge"),
(html! { <CircleHelp /> }, "Circle Help"),
(html! { <CircleMinus /> }, "Circle Minus"),
(html! { <CircleOff /> }, "Circle Off"),
(html! { <CircleParking /> }, "Circle Parking"),
(html! { <CircleParkingOff /> }, "Circle Parking Off"),
(html! { <CirclePause /> }, "Circle Pause"),
(html! { <CirclePercent /> }, "Circle Percent"),
(html! { <CirclePlay /> }, "Circle Play"),
(html! { <CirclePlus /> }, "Circle Plus"),
(html! { <CirclePower /> }, "Circle Power"),
(html! { <CircleSlash /> }, "Circle Slash"),
(html! { <CircleSlash2 /> }, "Circle Slash 2"),
(html! { <CircleStop /> }, "Circle Stop"),
(html! { <CircleUser /> }, "Circle User"),
(html! { <CircleUserRound /> }, "Circle User Round"),
(html! { <CircleX /> }, "Circle X"),
(html! { <CircuitBoard /> }, "Circuit Board"),
(html! { <Citrus /> }, "Citrus"),
(html! { <Clapperboard /> }, "Clapperboard"),
(html! { <Clipboard /> }, "Clipboard"),
(html! { <ClipboardCheck /> }, "Clipboard Check"),
(html! { <ClipboardCopy /> }, "Clipboard Copy"),
(html! { <ClipboardList /> }, "Clipboard List"),
(html! { <ClipboardMinus /> }, "Clipboard Minus"),
(html! { <ClipboardPaste /> }, "Clipboard Paste"),
(html! { <ClipboardPen /> }, "Clipboard Pen"),
(html! { <ClipboardPenLine /> }, "Clipboard Pen Line"),
(html! { <ClipboardPlus /> }, "Clipboard Plus"),
(html! { <ClipboardType /> }, "Clipboard Type"),
(html! { <ClipboardX /> }, "Clipboard X"),
(html! { <Clock /> }, "Clock"),
(html! { <Clock1 /> }, "Clock 1"),
(html! { <Clock10 /> }, "Clock 10"),
(html! { <Clock11 /> }, "Clock 11"),
(html! { <Clock12 /> }, "Clock 12"),
(html! { <Clock2 /> }, "Clock 2"),
(html! { <Clock3 /> }, "Clock 3"),
(html! { <Clock4 /> }, "Clock 4"),
(html! { <Clock5 /> }, "Clock 5"),
(html! { <Clock6 /> }, "Clock 6"),
(html! { <Clock7 /> }, "Clock 7"),
(html! { <Clock8 /> }, "Clock 8"),
(html! { <Clock9 /> }, "Clock 9"),
(html! { <ClockAlert /> }, "Clock Alert"),
(html! { <ClockArrowDown /> }, "Clock Arrow Down"),
(html! { <ClockArrowUp /> }, "Clock Arrow Up"),
(html! { <Cloud /> }, "Cloud"),
(html! { <CloudAlert /> }, "Cloud Alert"),
(html! { <CloudCog /> }, "Cloud Cog"),
(html! { <CloudDownload /> }, "Cloud Download"),
(html! { <CloudDrizzle /> }, "Cloud Drizzle"),
(html! { <CloudFog /> }, "Cloud Fog"),
(html! { <CloudHail /> }, "Cloud Hail"),
(html! { <CloudLightning /> }, "Cloud Lightning"),
(html! { <CloudMoon /> }, "Cloud Moon"),
(html! { <CloudMoonRain /> }, "Cloud Moon Rain"),
(html! { <CloudOff /> }, "Cloud Off"),
(html! { <CloudRain /> }, "Cloud Rain"),
(html! { <CloudRainWind /> }, "Cloud Rain Wind"),
(html! { <CloudSnow /> }, "Cloud Snow"),
(html! { <CloudSun /> }, "Cloud Sun"),
(html! { <CloudSunRain /> }, "Cloud Sun Rain"),
(html! { <CloudUpload /> }, "Cloud Upload"),
(html! { <Cloudy /> }, "Cloudy"),
(html! { <Clover /> }, "Clover"),
(html! { <Club /> }, "Club"),
(html! { <Code /> }, "Code"),
(html! { <CodeXml /> }, "Code Xml"),
(html! { <Codepen /> }, "Codepen"),
(html! { <Codesandbox /> }, "Codesandbox"),
(html! { <Coffee /> }, "Coffee"),
(html! { <Cog /> }, "Cog"),
(html! { <Coins /> }, "Coins"),
(html! { <Columns2 /> }, "Columns 2"),
(html! { <Columns3 /> }, "Columns 3"),
(html! { <Columns4 /> }, "Columns 4"),
(html! { <Combine /> }, "Combine"),
(html! { <Command /> }, "Command"),
(html! { <Compass /> }, "Compass"),
(html! { <Component /> }, "Component"),
(html! { <Computer /> }, "Computer"),
(html! { <ConciergeBell /> }, "Concierge Bell"),
(html! { <Cone /> }, "Cone"),
(html! { <Construction /> }, "Construction"),
(html! { <Contact /> }, "Contact"),
(html! { <ContactRound /> }, "Contact Round"),
(html! { <Container /> }, "Container"),
(html! { <Contrast /> }, "Contrast"),
(html! { <Cookie /> }, "Cookie"),
(html! { <CookingPot /> }, "Cooking Pot"),
(html! { <Copy /> }, "Copy"),
(html! { <CopyCheck /> }, "Copy Check"),
(html! { <CopyMinus /> }, "Copy Minus"),
(html! { <CopyPlus /> }, "Copy Plus"),
(html! { <CopySlash /> }, "Copy Slash"),
(html! { <CopyX /> }, "Copy X"),
(html! { <Copyleft /> }, "Copyleft"),
(html! { <Copyright /> }, "Copyright"),
(html! { <CornerDownLeft /> }, "Corner Down Left"),
(html! { <CornerDownRight /> }, "Corner Down Right"),
(html! { <CornerLeftDown /> }, "Corner Left Down"),
(html! { <CornerLeftUp /> }, "Corner Left Up"),
(html! { <CornerRightDown /> }, "Corner Right Down"),
(html! { <CornerRightUp /> }, "Corner Right Up"),
(html! { <CornerUpLeft /> }, "Corner Up Left"),
(html! { <CornerUpRight /> }, "Corner Up Right"),
(html! { <Cpu /> }, "Cpu"),
(html! { <CreativeCommons /> }, "Creative Commons"),
(html! { <CreditCard /> }, "Credit Card"),
(html! { <Croissant /> }, "Croissant"),
(html! { <Crop /> }, "Crop"),
(html! { <Cross /> }, "Cross"),
(html! { <Crosshair /> }, "Crosshair"),
(html! { <Crown /> }, "Crown"),
(html! { <Cuboid /> }, "Cuboid"),
(html! { <CupSoda /> }, "Cup Soda"),
(html! { <Currency /> }, "Currency"),
(html! { <Cylinder /> }, "Cylinder"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsD() -> Html {
let icons = [
(html! { <Dam /> }, "Dam"),
(html! { <Database /> }, "Database"),
(html! { <DatabaseBackup /> }, "Database Backup"),
(html! { <DatabaseZap /> }, "Database Zap"),
(html! { <Delete /> }, "Delete"),
(html! { <Dessert /> }, "Dessert"),
(html! { <Diameter /> }, "Diameter"),
(html! { <Diamond /> }, "Diamond"),
(html! { <DiamondMinus /> }, "Diamond Minus"),
(html! { <DiamondPercent /> }, "Diamond Percent"),
(html! { <DiamondPlus /> }, "Diamond Plus"),
(html! { <Dice1 /> }, "Dice 1"),
(html! { <Dice2 /> }, "Dice 2"),
(html! { <Dice3 /> }, "Dice 3"),
(html! { <Dice4 /> }, "Dice 4"),
(html! { <Dice5 /> }, "Dice 5"),
(html! { <Dice6 /> }, "Dice 6"),
(html! { <Dices /> }, "Dices"),
(html! { <Diff /> }, "Diff"),
(html! { <Disc /> }, "Disc"),
(html! { <Disc2 /> }, "Disc 2"),
(html! { <Disc3 /> }, "Disc 3"),
(html! { <DiscAlbum /> }, "Disc Album"),
(html! { <Divide /> }, "Divide"),
(html! { <Dna /> }, "Dna"),
(html! { <DnaOff /> }, "Dna Off"),
(html! { <Dock /> }, "Dock"),
(html! { <Dog /> }, "Dog"),
(html! { <DollarSign /> }, "Dollar Sign"),
(html! { <Donut /> }, "Donut"),
(html! { <DoorClosed /> }, "Door Closed"),
(html! { <DoorOpen /> }, "Door Open"),
(html! { <Dot /> }, "Dot"),
(html! { <Download /> }, "Download"),
(html! { <DraftingCompass /> }, "Drafting Compass"),
(html! { <Drama /> }, "Drama"),
(html! { <Dribbble /> }, "Dribbble"),
(html! { <Drill /> }, "Drill"),
(html! { <Droplet /> }, "Droplet"),
(html! { <DropletOff /> }, "Droplet Off"),
(html! { <Droplets /> }, "Droplets"),
(html! { <Drum /> }, "Drum"),
(html! { <Drumstick /> }, "Drumstick"),
(html! { <Dumbbell /> }, "Dumbbell"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsE() -> Html {
let icons = [
(html! { <Ear /> }, "Ear"),
(html! { <EarOff /> }, "Ear Off"),
(html! { <Earth /> }, "Earth"),
(html! { <EarthLock /> }, "Earth Lock"),
(html! { <Eclipse /> }, "Eclipse"),
(html! { <Egg /> }, "Egg"),
(html! { <EggFried /> }, "Egg Fried"),
(html! { <EggOff /> }, "Egg Off"),
(html! { <Ellipsis /> }, "Ellipsis"),
(html! { <EllipsisVertical /> }, "Ellipsis Vertical"),
(html! { <Equal /> }, "Equal"),
(html! { <EqualApproximately /> }, "Equal Approximately"),
(html! { <EqualNot /> }, "Equal Not"),
(html! { <Eraser /> }, "Eraser"),
(html! { <EthernetPort /> }, "Ethernet Port"),
(html! { <Euro /> }, "Euro"),
(html! { <Expand /> }, "Expand"),
(html! { <ExternalLink /> }, "External Link"),
(html! { <Eye /> }, "Eye"),
(html! { <EyeClosed /> }, "Eye Closed"),
(html! { <EyeOff /> }, "Eye Off"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsF() -> Html {
let icons = [
(html! { <Facebook /> }, "Facebook"),
(html! { <Factory /> }, "Factory"),
(html! { <Fan /> }, "Fan"),
(html! { <FastForward /> }, "Fast Forward"),
(html! { <Feather /> }, "Feather"),
(html! { <Fence /> }, "Fence"),
(html! { <FerrisWheel /> }, "Ferris Wheel"),
(html! { <Figma /> }, "Figma"),
(html! { <File /> }, "File"),
(html! { <FileArchive /> }, "File Archive"),
(html! { <FileAudio /> }, "File Audio"),
(html! { <FileAudio2 /> }, "File Audio 2"),
(html! { <FileAxis3D /> }, "File Axis 3 D"),
(html! { <FileBadge /> }, "File Badge"),
(html! { <FileBadge2 /> }, "File Badge 2"),
(html! { <FileBox /> }, "File Box"),
(html! { <FileChartColumn /> }, "File Chart Column"),
(
html! { <FileChartColumnIncreasing /> },
"File Chart Column Increasing",
),
(html! { <FileChartLine /> }, "File Chart Line"),
(html! { <FileChartPie /> }, "File Chart Pie"),
(html! { <FileCheck /> }, "File Check"),
(html! { <FileCheck2 /> }, "File Check 2"),
(html! { <FileClock /> }, "File Clock"),
(html! { <FileCode /> }, "File Code"),
(html! { <FileCode2 /> }, "File Code 2"),
(html! { <FileCog /> }, "File Cog"),
(html! { <FileDiff /> }, "File Diff"),
(html! { <FileDigit /> }, "File Digit"),
(html! { <FileDown /> }, "File Down"),
(html! { <FileHeart /> }, "File Heart"),
(html! { <FileImage /> }, "File Image"),
(html! { <FileInput /> }, "File Input"),
(html! { <FileJson /> }, "File Json"),
(html! { <FileJson2 /> }, "File Json 2"),
(html! { <FileKey /> }, "File Key"),
(html! { <FileKey2 /> }, "File Key 2"),
(html! { <FileLock /> }, "File Lock"),
(html! { <FileLock2 /> }, "File Lock 2"),
(html! { <FileMinus /> }, "File Minus"),
(html! { <FileMinus2 /> }, "File Minus 2"),
(html! { <FileMusic /> }, "File Music"),
(html! { <FileOutput /> }, "File Output"),
(html! { <FilePen /> }, "File Pen"),
(html! { <FilePenLine /> }, "File Pen Line"),
(html! { <FilePlus /> }, "File Plus"),
(html! { <FilePlus2 /> }, "File Plus 2"),
(html! { <FileQuestion /> }, "File Question"),
(html! { <FileScan /> }, "File Scan"),
(html! { <FileSearch /> }, "File Search"),
(html! { <FileSearch2 /> }, "File Search 2"),
(html! { <FileSliders /> }, "File Sliders"),
(html! { <FileSpreadsheet /> }, "File Spreadsheet"),
(html! { <FileStack /> }, "File Stack"),
(html! { <FileSymlink /> }, "File Symlink"),
(html! { <FileTerminal /> }, "File Terminal"),
(html! { <FileText /> }, "File Text"),
(html! { <FileType /> }, "File Type"),
(html! { <FileType2 /> }, "File Type 2"),
(html! { <FileUp /> }, "File Up"),
(html! { <FileUser /> }, "File User"),
(html! { <FileVideo /> }, "File Video"),
(html! { <FileVideo2 /> }, "File Video 2"),
(html! { <FileVolume /> }, "File Volume"),
(html! { <FileVolume2 /> }, "File Volume 2"),
(html! { <FileWarning /> }, "File Warning"),
(html! { <FileX /> }, "File X"),
(html! { <FileX2 /> }, "File X 2"),
(html! { <Files /> }, "Files"),
(html! { <Film /> }, "Film"),
(html! { <Filter /> }, "Filter"),
(html! { <FilterX /> }, "Filter X"),
(html! { <Fingerprint /> }, "Fingerprint"),
(html! { <FireExtinguisher /> }, "Fire Extinguisher"),
(html! { <Fish /> }, "Fish"),
(html! { <FishOff /> }, "Fish Off"),
(html! { <FishSymbol /> }, "Fish Symbol"),
(html! { <Flag /> }, "Flag"),
(html! { <FlagOff /> }, "Flag Off"),
(html! { <FlagTriangleLeft /> }, "Flag Triangle Left"),
(html! { <FlagTriangleRight /> }, "Flag Triangle Right"),
(html! { <Flame /> }, "Flame"),
(html! { <FlameKindling /> }, "Flame Kindling"),
(html! { <Flashlight /> }, "Flashlight"),
(html! { <FlashlightOff /> }, "Flashlight Off"),
(html! { <FlaskConical /> }, "Flask Conical"),
(html! { <FlaskConicalOff /> }, "Flask Conical Off"),
(html! { <FlaskRound /> }, "Flask Round"),
(html! { <FlipHorizontal /> }, "Flip Horizontal"),
(html! { <FlipHorizontal2 /> }, "Flip Horizontal 2"),
(html! { <FlipVertical /> }, "Flip Vertical"),
(html! { <FlipVertical2 /> }, "Flip Vertical 2"),
(html! { <Flower /> }, "Flower"),
(html! { <Flower2 /> }, "Flower 2"),
(html! { <Focus /> }, "Focus"),
(html! { <FoldHorizontal /> }, "Fold Horizontal"),
(html! { <FoldVertical /> }, "Fold Vertical"),
(html! { <Folder /> }, "Folder"),
(html! { <FolderArchive /> }, "Folder Archive"),
(html! { <FolderCheck /> }, "Folder Check"),
(html! { <FolderClock /> }, "Folder Clock"),
(html! { <FolderClosed /> }, "Folder Closed"),
(html! { <FolderCode /> }, "Folder Code"),
(html! { <FolderCog /> }, "Folder Cog"),
(html! { <FolderDot /> }, "Folder Dot"),
(html! { <FolderDown /> }, "Folder Down"),
(html! { <FolderGit /> }, "Folder Git"),
(html! { <FolderGit2 /> }, "Folder Git 2"),
(html! { <FolderHeart /> }, "Folder Heart"),
(html! { <FolderInput /> }, "Folder Input"),
(html! { <FolderKanban /> }, "Folder Kanban"),
(html! { <FolderKey /> }, "Folder Key"),
(html! { <FolderLock /> }, "Folder Lock"),
(html! { <FolderMinus /> }, "Folder Minus"),
(html! { <FolderOpen /> }, "Folder Open"),
(html! { <FolderOpenDot /> }, "Folder Open Dot"),
(html! { <FolderOutput /> }, "Folder Output"),
(html! { <FolderPen /> }, "Folder Pen"),
(html! { <FolderPlus /> }, "Folder Plus"),
(html! { <FolderRoot /> }, "Folder Root"),
(html! { <FolderSearch /> }, "Folder Search"),
(html! { <FolderSearch2 /> }, "Folder Search 2"),
(html! { <FolderSymlink /> }, "Folder Symlink"),
(html! { <FolderSync /> }, "Folder Sync"),
(html! { <FolderTree /> }, "Folder Tree"),
(html! { <FolderUp /> }, "Folder Up"),
(html! { <FolderX /> }, "Folder X"),
(html! { <Folders /> }, "Folders"),
(html! { <Footprints /> }, "Footprints"),
(html! { <Forklift /> }, "Forklift"),
(html! { <Forward /> }, "Forward"),
(html! { <Frame /> }, "Frame"),
(html! { <Framer /> }, "Framer"),
(html! { <Frown /> }, "Frown"),
(html! { <Fuel /> }, "Fuel"),
(html! { <Fullscreen /> }, "Fullscreen"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsG() -> Html {
let icons = [
(html! { <GalleryHorizontal /> }, "Gallery Horizontal"),
(html! { <GalleryHorizontalEnd /> }, "Gallery Horizontal End"),
(html! { <GalleryThumbnails /> }, "Gallery Thumbnails"),
(html! { <GalleryVertical /> }, "Gallery Vertical"),
(html! { <GalleryVerticalEnd /> }, "Gallery Vertical End"),
(html! { <Gamepad /> }, "Gamepad"),
(html! { <Gamepad2 /> }, "Gamepad 2"),
(html! { <Gauge /> }, "Gauge"),
(html! { <Gavel /> }, "Gavel"),
(html! { <Gem /> }, "Gem"),
(html! { <Ghost /> }, "Ghost"),
(html! { <Gift /> }, "Gift"),
(html! { <GitBranch /> }, "Git Branch"),
(html! { <GitBranchPlus /> }, "Git Branch Plus"),
(html! { <GitCommitHorizontal /> }, "Git Commit Horizontal"),
(html! { <GitCommitVertical /> }, "Git Commit Vertical"),
(html! { <GitCompare /> }, "Git Compare"),
(html! { <GitCompareArrows /> }, "Git Compare Arrows"),
(html! { <GitFork /> }, "Git Fork"),
(html! { <GitGraph /> }, "Git Graph"),
(html! { <GitMerge /> }, "Git Merge"),
(html! { <GitPullRequest /> }, "Git Pull Request"),
(html! { <GitPullRequestArrow /> }, "Git Pull Request Arrow"),
(
html! { <GitPullRequestClosed /> },
"Git Pull Request Closed",
),
(
html! { <GitPullRequestCreate /> },
"Git Pull Request Create",
),
(
html! { <GitPullRequestCreateArrow /> },
"Git Pull Request Create Arrow",
),
(html! { <GitPullRequestDraft /> }, "Git Pull Request Draft"),
(html! { <Github /> }, "Github"),
(html! { <Gitlab /> }, "Gitlab"),
(html! { <GlassWater /> }, "Glass Water"),
(html! { <Glasses /> }, "Glasses"),
(html! { <Globe /> }, "Globe"),
(html! { <GlobeLock /> }, "Globe Lock"),
(html! { <Goal /> }, "Goal"),
(html! { <Grab /> }, "Grab"),
(html! { <GraduationCap /> }, "Graduation Cap"),
(html! { <Grape /> }, "Grape"),
(html! { <Grid2X2 /> }, "Grid 2 X 2"),
(html! { <Grid2X2Check /> }, "Grid 2 X 2 Check"),
(html! { <Grid2X2Plus /> }, "Grid 2 X 2 Plus"),
(html! { <Grid2X2X /> }, "Grid 2 X 2 X"),
(html! { <Grid3X3 /> }, "Grid 3 X 3"),
(html! { <Grip /> }, "Grip"),
(html! { <GripHorizontal /> }, "Grip Horizontal"),
(html! { <GripVertical /> }, "Grip Vertical"),
(html! { <Group /> }, "Group"),
(html! { <Guitar /> }, "Guitar"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsH() -> Html {
let icons = [
(html! { <Ham /> }, "Ham"),
(html! { <Hammer /> }, "Hammer"),
(html! { <Hand /> }, "Hand"),
(html! { <HandCoins /> }, "Hand Coins"),
(html! { <HandHeart /> }, "Hand Heart"),
(html! { <HandHelping /> }, "Hand Helping"),
(html! { <HandMetal /> }, "Hand Metal"),
(html! { <HandPlatter /> }, "Hand Platter"),
(html! { <Handshake /> }, "Handshake"),
(html! { <HardDrive /> }, "Hard Drive"),
(html! { <HardDriveDownload /> }, "Hard Drive Download"),
(html! { <HardDriveUpload /> }, "Hard Drive Upload"),
(html! { <HardHat /> }, "Hard Hat"),
(html! { <Hash /> }, "Hash"),
(html! { <Haze /> }, "Haze"),
(html! { <HdmiPort /> }, "Hdmi Port"),
(html! { <Heading /> }, "Heading"),
(html! { <Heading1 /> }, "Heading 1"),
(html! { <Heading2 /> }, "Heading 2"),
(html! { <Heading3 /> }, "Heading 3"),
(html! { <Heading4 /> }, "Heading 4"),
(html! { <Heading5 /> }, "Heading 5"),
(html! { <Heading6 /> }, "Heading 6"),
(html! { <HeadphoneOff /> }, "Headphone Off"),
(html! { <Headphones /> }, "Headphones"),
(html! { <Headset /> }, "Headset"),
(html! { <Heart /> }, "Heart"),
(html! { <HeartCrack /> }, "Heart Crack"),
(html! { <HeartHandshake /> }, "Heart Handshake"),
(html! { <HeartOff /> }, "Heart Off"),
(html! { <HeartPulse /> }, "Heart Pulse"),
(html! { <Heater /> }, "Heater"),
(html! { <Hexagon /> }, "Hexagon"),
(html! { <Highlighter /> }, "Highlighter"),
(html! { <History /> }, "History"),
(html! { <Hop /> }, "Hop"),
(html! { <HopOff /> }, "Hop Off"),
(html! { <Hospital /> }, "Hospital"),
(html! { <Hotel /> }, "Hotel"),
(html! { <Hourglass /> }, "Hourglass"),
(html! { <House /> }, "House"),
(html! { <HousePlug /> }, "House Plug"),
(html! { <HousePlus /> }, "House Plus"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsI() -> Html {
let icons = [
(html! { <IceCreamBowl /> }, "Ice Cream Bowl"),
(html! { <IceCreamCone /> }, "Ice Cream Cone"),
(html! { <IdCard /> }, "Id Card"),
(html! { <Image /> }, "Image"),
(html! { <ImageDown /> }, "Image Down"),
(html! { <ImageMinus /> }, "Image Minus"),
(html! { <ImageOff /> }, "Image Off"),
(html! { <ImagePlay /> }, "Image Play"),
(html! { <ImagePlus /> }, "Image Plus"),
(html! { <ImageUp /> }, "Image Up"),
(html! { <ImageUpscale /> }, "Image Upscale"),
(html! { <Images /> }, "Images"),
(html! { <Import /> }, "Import"),
(html! { <Inbox /> }, "Inbox"),
(html! { <IndentDecrease /> }, "Indent Decrease"),
(html! { <IndentIncrease /> }, "Indent Increase"),
(html! { <IndianRupee /> }, "Indian Rupee"),
(html! { <Infinity /> }, "Infinity"),
(html! { <Info /> }, "Info"),
(html! { <InspectionPanel /> }, "Inspection Panel"),
(html! { <Instagram /> }, "Instagram"),
(html! { <Italic /> }, "Italic"),
(html! { <IterationCcw /> }, "Iteration Ccw"),
(html! { <IterationCw /> }, "Iteration Cw"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsJ() -> Html {
let icons = [
(html! { <JapaneseYen /> }, "Japanese Yen"),
(html! { <Joystick /> }, "Joystick"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsK() -> Html {
let icons = [
(html! { <Kanban /> }, "Kanban"),
(html! { <Key /> }, "Key"),
(html! { <KeyRound /> }, "Key Round"),
(html! { <KeySquare /> }, "Key Square"),
(html! { <Keyboard /> }, "Keyboard"),
(html! { <KeyboardMusic /> }, "Keyboard Music"),
(html! { <KeyboardOff /> }, "Keyboard Off"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsL() -> Html {
let icons = [
(html! { <Lamp /> }, "Lamp"),
(html! { <LampCeiling /> }, "Lamp Ceiling"),
(html! { <LampDesk /> }, "Lamp Desk"),
(html! { <LampFloor /> }, "Lamp Floor"),
(html! { <LampWallDown /> }, "Lamp Wall Down"),
(html! { <LampWallUp /> }, "Lamp Wall Up"),
(html! { <LandPlot /> }, "Land Plot"),
(html! { <Landmark /> }, "Landmark"),
(html! { <Languages /> }, "Languages"),
(html! { <Laptop /> }, "Laptop"),
(html! { <LaptopMinimal /> }, "Laptop Minimal"),
(html! { <LaptopMinimalCheck /> }, "Laptop Minimal Check"),
(html! { <Lasso /> }, "Lasso"),
(html! { <LassoSelect /> }, "Lasso Select"),
(html! { <Laugh /> }, "Laugh"),
(html! { <Layers /> }, "Layers"),
(html! { <Layers2 /> }, "Layers 2"),
(html! { <LayoutDashboard /> }, "Layout Dashboard"),
(html! { <LayoutGrid /> }, "Layout Grid"),
(html! { <LayoutList /> }, "Layout List"),
(html! { <LayoutPanelLeft /> }, "Layout Panel Left"),
(html! { <LayoutPanelTop /> }, "Layout Panel Top"),
(html! { <LayoutTemplate /> }, "Layout Template"),
(html! { <Leaf /> }, "Leaf"),
(html! { <LeafyGreen /> }, "Leafy Green"),
(html! { <Lectern /> }, "Lectern"),
(html! { <LetterText /> }, "Letter Text"),
(html! { <Library /> }, "Library"),
(html! { <LibraryBig /> }, "Library Big"),
(html! { <LifeBuoy /> }, "Life Buoy"),
(html! { <Ligature /> }, "Ligature"),
(html! { <Lightbulb /> }, "Lightbulb"),
(html! { <LightbulbOff /> }, "Lightbulb Off"),
(html! { <Link /> }, "Link"),
(html! { <Link2 /> }, "Link 2"),
(html! { <Link2Off /> }, "Link 2 Off"),
(html! { <Linkedin /> }, "Linkedin"),
(html! { <List /> }, "List"),
(html! { <ListCheck /> }, "List Check"),
(html! { <ListChecks /> }, "List Checks"),
(html! { <ListCollapse /> }, "List Collapse"),
(html! { <ListEnd /> }, "List End"),
(html! { <ListFilter /> }, "List Filter"),
(html! { <ListFilterPlus /> }, "List Filter Plus"),
(html! { <ListMinus /> }, "List Minus"),
(html! { <ListMusic /> }, "List Music"),
(html! { <ListOrdered /> }, "List Ordered"),
(html! { <ListPlus /> }, "List Plus"),
(html! { <ListRestart /> }, "List Restart"),
(html! { <ListStart /> }, "List Start"),
(html! { <ListTodo /> }, "List Todo"),
(html! { <ListTree /> }, "List Tree"),
(html! { <ListVideo /> }, "List Video"),
(html! { <ListX /> }, "List X"),
(html! { <Loader /> }, "Loader"),
(html! { <LoaderCircle /> }, "Loader Circle"),
(html! { <LoaderPinwheel /> }, "Loader Pinwheel"),
(html! { <Locate /> }, "Locate"),
(html! { <LocateFixed /> }, "Locate Fixed"),
(html! { <LocateOff /> }, "Locate Off"),
(html! { <Lock /> }, "Lock"),
(html! { <LockKeyhole /> }, "Lock Keyhole"),
(html! { <LockKeyholeOpen /> }, "Lock Keyhole Open"),
(html! { <LockOpen /> }, "Lock Open"),
(html! { <LogIn /> }, "Log In"),
(html! { <LogOut /> }, "Log Out"),
(html! { <Logs /> }, "Logs"),
(html! { <Lollipop /> }, "Lollipop"),
(html! { <Luggage /> }, "Luggage"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsM() -> Html {
let icons = [
(html! { <Magnet /> }, "Magnet"),
(html! { <Mail /> }, "Mail"),
(html! { <MailCheck /> }, "Mail Check"),
(html! { <MailMinus /> }, "Mail Minus"),
(html! { <MailOpen /> }, "Mail Open"),
(html! { <MailPlus /> }, "Mail Plus"),
(html! { <MailQuestion /> }, "Mail Question"),
(html! { <MailSearch /> }, "Mail Search"),
(html! { <MailWarning /> }, "Mail Warning"),
(html! { <MailX /> }, "Mail X"),
(html! { <Mailbox /> }, "Mailbox"),
(html! { <Mails /> }, "Mails"),
(html! { <Map /> }, "Map"),
(html! { <MapPin /> }, "Map Pin"),
(html! { <MapPinCheck /> }, "Map Pin Check"),
(html! { <MapPinCheckInside /> }, "Map Pin Check Inside"),
(html! { <MapPinHouse /> }, "Map Pin House"),
(html! { <MapPinMinus /> }, "Map Pin Minus"),
(html! { <MapPinMinusInside /> }, "Map Pin Minus Inside"),
(html! { <MapPinOff /> }, "Map Pin Off"),
(html! { <MapPinPlus /> }, "Map Pin Plus"),
(html! { <MapPinPlusInside /> }, "Map Pin Plus Inside"),
(html! { <MapPinX /> }, "Map Pin X"),
(html! { <MapPinXInside /> }, "Map Pin X Inside"),
(html! { <MapPinned /> }, "Map Pinned"),
(html! { <Martini /> }, "Martini"),
(html! { <Maximize /> }, "Maximize"),
(html! { <Maximize2 /> }, "Maximize 2"),
(html! { <Medal /> }, "Medal"),
(html! { <Megaphone /> }, "Megaphone"),
(html! { <MegaphoneOff /> }, "Megaphone Off"),
(html! { <Meh /> }, "Meh"),
(html! { <MemoryStick /> }, "Memory Stick"),
(html! { <Menu /> }, "Menu"),
(html! { <Merge /> }, "Merge"),
(html! { <MessageCircle /> }, "Message Circle"),
(html! { <MessageCircleCode /> }, "Message Circle Code"),
(html! { <MessageCircleDashed /> }, "Message Circle Dashed"),
(html! { <MessageCircleHeart /> }, "Message Circle Heart"),
(html! { <MessageCircleMore /> }, "Message Circle More"),
(html! { <MessageCircleOff /> }, "Message Circle Off"),
(html! { <MessageCirclePlus /> }, "Message Circle Plus"),
(
html! { <MessageCircleQuestion /> },
"Message Circle Question",
),
(html! { <MessageCircleReply /> }, "Message Circle Reply"),
(html! { <MessageCircleWarning /> }, "Message Circle Warning"),
(html! { <MessageCircleX /> }, "Message Circle X"),
(html! { <MessageSquare /> }, "Message Square"),
(html! { <MessageSquareCode /> }, "Message Square Code"),
(html! { <MessageSquareDashed /> }, "Message Square Dashed"),
(html! { <MessageSquareDiff /> }, "Message Square Diff"),
(html! { <MessageSquareDot /> }, "Message Square Dot"),
(html! { <MessageSquareHeart /> }, "Message Square Heart"),
(html! { <MessageSquareLock /> }, "Message Square Lock"),
(html! { <MessageSquareMore /> }, "Message Square More"),
(html! { <MessageSquareOff /> }, "Message Square Off"),
(html! { <MessageSquarePlus /> }, "Message Square Plus"),
(html! { <MessageSquareQuote /> }, "Message Square Quote"),
(html! { <MessageSquareReply /> }, "Message Square Reply"),
(html! { <MessageSquareShare /> }, "Message Square Share"),
(html! { <MessageSquareText /> }, "Message Square Text"),
(html! { <MessageSquareWarning /> }, "Message Square Warning"),
(html! { <MessageSquareX /> }, "Message Square X"),
(html! { <MessagesSquare /> }, "Messages Square"),
(html! { <Mic /> }, "Mic"),
(html! { <MicOff /> }, "Mic Off"),
(html! { <MicVocal /> }, "Mic Vocal"),
(html! { <Microchip /> }, "Microchip"),
(html! { <Microscope /> }, "Microscope"),
(html! { <Microwave /> }, "Microwave"),
(html! { <Milestone /> }, "Milestone"),
(html! { <Milk /> }, "Milk"),
(html! { <MilkOff /> }, "Milk Off"),
(html! { <Minimize /> }, "Minimize"),
(html! { <Minimize2 /> }, "Minimize 2"),
(html! { <Minus /> }, "Minus"),
(html! { <Monitor /> }, "Monitor"),
(html! { <MonitorCheck /> }, "Monitor Check"),
(html! { <MonitorCog /> }, "Monitor Cog"),
(html! { <MonitorDot /> }, "Monitor Dot"),
(html! { <MonitorDown /> }, "Monitor Down"),
(html! { <MonitorOff /> }, "Monitor Off"),
(html! { <MonitorPause /> }, "Monitor Pause"),
(html! { <MonitorPlay /> }, "Monitor Play"),
(html! { <MonitorSmartphone /> }, "Monitor Smartphone"),
(html! { <MonitorSpeaker /> }, "Monitor Speaker"),
(html! { <MonitorStop /> }, "Monitor Stop"),
(html! { <MonitorUp /> }, "Monitor Up"),
(html! { <MonitorX /> }, "Monitor X"),
(html! { <Moon /> }, "Moon"),
(html! { <MoonStar /> }, "Moon Star"),
(html! { <Mountain /> }, "Mountain"),
(html! { <MountainSnow /> }, "Mountain Snow"),
(html! { <Mouse /> }, "Mouse"),
(html! { <MouseOff /> }, "Mouse Off"),
(html! { <MousePointer /> }, "Mouse Pointer"),
(html! { <MousePointer2 /> }, "Mouse Pointer 2"),
(html! { <MousePointerBan /> }, "Mouse Pointer Ban"),
(html! { <MousePointerClick /> }, "Mouse Pointer Click"),
(html! { <Move /> }, "Move"),
(html! { <Move3D /> }, "Move 3 D"),
(html! { <MoveDiagonal /> }, "Move Diagonal"),
(html! { <MoveDiagonal2 /> }, "Move Diagonal 2"),
(html! { <MoveDown /> }, "Move Down"),
(html! { <MoveDownLeft /> }, "Move Down Left"),
(html! { <MoveDownRight /> }, "Move Down Right"),
(html! { <MoveHorizontal /> }, "Move Horizontal"),
(html! { <MoveLeft /> }, "Move Left"),
(html! { <MoveRight /> }, "Move Right"),
(html! { <MoveUp /> }, "Move Up"),
(html! { <MoveUpLeft /> }, "Move Up Left"),
(html! { <MoveUpRight /> }, "Move Up Right"),
(html! { <MoveVertical /> }, "Move Vertical"),
(html! { <Music /> }, "Music"),
(html! { <Music2 /> }, "Music 2"),
(html! { <Music3 /> }, "Music 3"),
(html! { <Music4 /> }, "Music 4"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsN() -> Html {
let icons = [
(html! { <Navigation /> }, "Navigation"),
(html! { <Navigation2 /> }, "Navigation 2"),
(html! { <Navigation2Off /> }, "Navigation 2 Off"),
(html! { <NavigationOff /> }, "Navigation Off"),
(html! { <Network /> }, "Network"),
(html! { <Newspaper /> }, "Newspaper"),
(html! { <Nfc /> }, "Nfc"),
(html! { <Notebook /> }, "Notebook"),
(html! { <NotebookPen /> }, "Notebook Pen"),
(html! { <NotebookTabs /> }, "Notebook Tabs"),
(html! { <NotebookText /> }, "Notebook Text"),
(html! { <NotepadText /> }, "Notepad Text"),
(html! { <NotepadTextDashed /> }, "Notepad Text Dashed"),
(html! { <Nut /> }, "Nut"),
(html! { <NutOff /> }, "Nut Off"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsO() -> Html {
let icons = [
(html! { <Octagon /> }, "Octagon"),
(html! { <OctagonAlert /> }, "Octagon Alert"),
(html! { <OctagonMinus /> }, "Octagon Minus"),
(html! { <OctagonPause /> }, "Octagon Pause"),
(html! { <OctagonX /> }, "Octagon X"),
(html! { <Omega /> }, "Omega"),
(html! { <Option /> }, "Option"),
(html! { <Orbit /> }, "Orbit"),
(html! { <Origami /> }, "Origami"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsP() -> Html {
let icons = [
(html! { <Package /> }, "Package"),
(html! { <Package2 /> }, "Package 2"),
(html! { <PackageCheck /> }, "Package Check"),
(html! { <PackageMinus /> }, "Package Minus"),
(html! { <PackageOpen /> }, "Package Open"),
(html! { <PackagePlus /> }, "Package Plus"),
(html! { <PackageSearch /> }, "Package Search"),
(html! { <PackageX /> }, "Package X"),
(html! { <PaintBucket /> }, "Paint Bucket"),
(html! { <PaintRoller /> }, "Paint Roller"),
(html! { <Paintbrush /> }, "Paintbrush"),
(html! { <PaintbrushVertical /> }, "Paintbrush Vertical"),
(html! { <Palette /> }, "Palette"),
(html! { <PanelBottom /> }, "Panel Bottom"),
(html! { <PanelBottomClose /> }, "Panel Bottom Close"),
(html! { <PanelBottomDashed /> }, "Panel Bottom Dashed"),
(html! { <PanelBottomOpen /> }, "Panel Bottom Open"),
(html! { <PanelLeft /> }, "Panel Left"),
(html! { <PanelLeftClose /> }, "Panel Left Close"),
(html! { <PanelLeftDashed /> }, "Panel Left Dashed"),
(html! { <PanelLeftOpen /> }, "Panel Left Open"),
(html! { <PanelRight /> }, "Panel Right"),
(html! { <PanelRightClose /> }, "Panel Right Close"),
(html! { <PanelRightDashed /> }, "Panel Right Dashed"),
(html! { <PanelRightOpen /> }, "Panel Right Open"),
(html! { <PanelTop /> }, "Panel Top"),
(html! { <PanelTopClose /> }, "Panel Top Close"),
(html! { <PanelTopDashed /> }, "Panel Top Dashed"),
(html! { <PanelTopOpen /> }, "Panel Top Open"),
(html! { <PanelsLeftBottom /> }, "Panels Left Bottom"),
(html! { <PanelsRightBottom /> }, "Panels Right Bottom"),
(html! { <PanelsTopLeft /> }, "Panels Top Left"),
(html! { <Paperclip /> }, "Paperclip"),
(html! { <Parentheses /> }, "Parentheses"),
(html! { <ParkingMeter /> }, "Parking Meter"),
(html! { <PartyPopper /> }, "Party Popper"),
(html! { <Pause /> }, "Pause"),
(html! { <PawPrint /> }, "Paw Print"),
(html! { <PcCase /> }, "Pc Case"),
(html! { <Pen /> }, "Pen"),
(html! { <PenLine /> }, "Pen Line"),
(html! { <PenOff /> }, "Pen Off"),
(html! { <PenTool /> }, "Pen Tool"),
(html! { <Pencil /> }, "Pencil"),
(html! { <PencilLine /> }, "Pencil Line"),
(html! { <PencilOff /> }, "Pencil Off"),
(html! { <PencilRuler /> }, "Pencil Ruler"),
(html! { <Pentagon /> }, "Pentagon"),
(html! { <Percent /> }, "Percent"),
(html! { <PersonStanding /> }, "Person Standing"),
(html! { <PhilippinePeso /> }, "Philippine Peso"),
(html! { <Phone /> }, "Phone"),
(html! { <PhoneCall /> }, "Phone Call"),
(html! { <PhoneForwarded /> }, "Phone Forwarded"),
(html! { <PhoneIncoming /> }, "Phone Incoming"),
(html! { <PhoneMissed /> }, "Phone Missed"),
(html! { <PhoneOff /> }, "Phone Off"),
(html! { <PhoneOutgoing /> }, "Phone Outgoing"),
(html! { <Pi /> }, "Pi"),
(html! { <Piano /> }, "Piano"),
(html! { <Pickaxe /> }, "Pickaxe"),
(html! { <PictureInPicture /> }, "Picture In Picture"),
(html! { <PictureInPicture2 /> }, "Picture In Picture 2"),
(html! { <PiggyBank /> }, "Piggy Bank"),
(html! { <Pilcrow /> }, "Pilcrow"),
(html! { <PilcrowLeft /> }, "Pilcrow Left"),
(html! { <PilcrowRight /> }, "Pilcrow Right"),
(html! { <Pill /> }, "Pill"),
(html! { <PillBottle /> }, "Pill Bottle"),
(html! { <Pin /> }, "Pin"),
(html! { <PinOff /> }, "Pin Off"),
(html! { <Pipette /> }, "Pipette"),
(html! { <Pizza /> }, "Pizza"),
(html! { <Plane /> }, "Plane"),
(html! { <PlaneLanding /> }, "Plane Landing"),
(html! { <PlaneTakeoff /> }, "Plane Takeoff"),
(html! { <Play /> }, "Play"),
(html! { <Plug /> }, "Plug"),
(html! { <Plug2 /> }, "Plug 2"),
(html! { <PlugZap /> }, "Plug Zap"),
(html! { <Plus /> }, "Plus"),
(html! { <Pocket /> }, "Pocket"),
(html! { <PocketKnife /> }, "Pocket Knife"),
(html! { <Podcast /> }, "Podcast"),
(html! { <Pointer /> }, "Pointer"),
(html! { <PointerOff /> }, "Pointer Off"),
(html! { <Popcorn /> }, "Popcorn"),
(html! { <Popsicle /> }, "Popsicle"),
(html! { <PoundSterling /> }, "Pound Sterling"),
(html! { <Power /> }, "Power"),
(html! { <PowerOff /> }, "Power Off"),
(html! { <Presentation /> }, "Presentation"),
(html! { <Printer /> }, "Printer"),
(html! { <PrinterCheck /> }, "Printer Check"),
(html! { <Projector /> }, "Projector"),
(html! { <Proportions /> }, "Proportions"),
(html! { <Puzzle /> }, "Puzzle"),
(html! { <Pyramid /> }, "Pyramid"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsQ() -> Html {
let icons = [
(html! { <QrCode /> }, "Qr Code"),
(html! { <Quote /> }, "Quote"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsR() -> Html {
let icons = [
(html! { <Rabbit /> }, "Rabbit"),
(html! { <Radar /> }, "Radar"),
(html! { <Radiation /> }, "Radiation"),
(html! { <Radical /> }, "Radical"),
(html! { <Radio /> }, "Radio"),
(html! { <RadioReceiver /> }, "Radio Receiver"),
(html! { <RadioTower /> }, "Radio Tower"),
(html! { <Radius /> }, "Radius"),
(html! { <RailSymbol /> }, "Rail Symbol"),
(html! { <Rainbow /> }, "Rainbow"),
(html! { <Rat /> }, "Rat"),
(html! { <Ratio /> }, "Ratio"),
(html! { <Receipt /> }, "Receipt"),
(html! { <ReceiptCent /> }, "Receipt Cent"),
(html! { <ReceiptEuro /> }, "Receipt Euro"),
(html! { <ReceiptIndianRupee /> }, "Receipt Indian Rupee"),
(html! { <ReceiptJapaneseYen /> }, "Receipt Japanese Yen"),
(html! { <ReceiptPoundSterling /> }, "Receipt Pound Sterling"),
(html! { <ReceiptRussianRuble /> }, "Receipt Russian Ruble"),
(html! { <ReceiptSwissFranc /> }, "Receipt Swiss Franc"),
(html! { <ReceiptText /> }, "Receipt Text"),
(html! { <RectangleEllipsis /> }, "Rectangle Ellipsis"),
(html! { <RectangleHorizontal /> }, "Rectangle Horizontal"),
(html! { <RectangleVertical /> }, "Rectangle Vertical"),
(html! { <Recycle /> }, "Recycle"),
(html! { <Redo /> }, "Redo"),
(html! { <Redo2 /> }, "Redo 2"),
(html! { <RedoDot /> }, "Redo Dot"),
(html! { <RefreshCcw /> }, "Refresh Ccw"),
(html! { <RefreshCcwDot /> }, "Refresh Ccw Dot"),
(html! { <RefreshCw /> }, "Refresh Cw"),
(html! { <RefreshCwOff /> }, "Refresh Cw Off"),
(html! { <Refrigerator /> }, "Refrigerator"),
(html! { <Regex /> }, "Regex"),
(html! { <RemoveFormatting /> }, "Remove Formatting"),
(html! { <Repeat /> }, "Repeat"),
(html! { <Repeat1 /> }, "Repeat 1"),
(html! { <Repeat2 /> }, "Repeat 2"),
(html! { <Replace /> }, "Replace"),
(html! { <ReplaceAll /> }, "Replace All"),
(html! { <Reply /> }, "Reply"),
(html! { <ReplyAll /> }, "Reply All"),
(html! { <Rewind /> }, "Rewind"),
(html! { <Ribbon /> }, "Ribbon"),
(html! { <Rocket /> }, "Rocket"),
(html! { <RockingChair /> }, "Rocking Chair"),
(html! { <RollerCoaster /> }, "Roller Coaster"),
(html! { <Rotate3D /> }, "Rotate 3 D"),
(html! { <RotateCcw /> }, "Rotate Ccw"),
(html! { <RotateCcwSquare /> }, "Rotate Ccw Square"),
(html! { <RotateCw /> }, "Rotate Cw"),
(html! { <RotateCwSquare /> }, "Rotate Cw Square"),
(html! { <Route /> }, "Route"),
(html! { <RouteOff /> }, "Route Off"),
(html! { <Router /> }, "Router"),
(html! { <Rows2 /> }, "Rows 2"),
(html! { <Rows3 /> }, "Rows 3"),
(html! { <Rows4 /> }, "Rows 4"),
(html! { <Rss /> }, "Rss"),
(html! { <Ruler /> }, "Ruler"),
(html! { <RussianRuble /> }, "Russian Ruble"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsS() -> Html {
let icons = [
(html! { <Sailboat /> }, "Sailboat"),
(html! { <Salad /> }, "Salad"),
(html! { <Sandwich /> }, "Sandwich"),
(html! { <Satellite /> }, "Satellite"),
(html! { <SatelliteDish /> }, "Satellite Dish"),
(html! { <Save /> }, "Save"),
(html! { <SaveAll /> }, "Save All"),
(html! { <SaveOff /> }, "Save Off"),
(html! { <Scale /> }, "Scale"),
(html! { <Scale3D /> }, "Scale 3 D"),
(html! { <Scaling /> }, "Scaling"),
(html! { <Scan /> }, "Scan"),
(html! { <ScanBarcode /> }, "Scan Barcode"),
(html! { <ScanEye /> }, "Scan Eye"),
(html! { <ScanFace /> }, "Scan Face"),
(html! { <ScanHeart /> }, "Scan Heart"),
(html! { <ScanLine /> }, "Scan Line"),
(html! { <ScanQrCode /> }, "Scan Qr Code"),
(html! { <ScanSearch /> }, "Scan Search"),
(html! { <ScanText /> }, "Scan Text"),
(html! { <School /> }, "School"),
(html! { <Scissors /> }, "Scissors"),
(html! { <ScissorsLineDashed /> }, "Scissors Line Dashed"),
(html! { <ScreenShare /> }, "Screen Share"),
(html! { <ScreenShareOff /> }, "Screen Share Off"),
(html! { <Scroll /> }, "Scroll"),
(html! { <ScrollText /> }, "Scroll Text"),
(html! { <Search /> }, "Search"),
(html! { <SearchCheck /> }, "Search Check"),
(html! { <SearchCode /> }, "Search Code"),
(html! { <SearchSlash /> }, "Search Slash"),
(html! { <SearchX /> }, "Search X"),
(html! { <Section /> }, "Section"),
(html! { <Send /> }, "Send"),
(html! { <SendHorizontal /> }, "Send Horizontal"),
(html! { <SendToBack /> }, "Send To Back"),
(html! { <SeparatorHorizontal /> }, "Separator Horizontal"),
(html! { <SeparatorVertical /> }, "Separator Vertical"),
(html! { <Server /> }, "Server"),
(html! { <ServerCog /> }, "Server Cog"),
(html! { <ServerCrash /> }, "Server Crash"),
(html! { <ServerOff /> }, "Server Off"),
(html! { <Settings /> }, "Settings"),
(html! { <Settings2 /> }, "Settings 2"),
(html! { <Shapes /> }, "Shapes"),
(html! { <Share /> }, "Share"),
(html! { <Share2 /> }, "Share 2"),
(html! { <Sheet /> }, "Sheet"),
(html! { <Shell /> }, "Shell"),
(html! { <Shield /> }, "Shield"),
(html! { <ShieldAlert /> }, "Shield Alert"),
(html! { <ShieldBan /> }, "Shield Ban"),
(html! { <ShieldCheck /> }, "Shield Check"),
(html! { <ShieldEllipsis /> }, "Shield Ellipsis"),
(html! { <ShieldHalf /> }, "Shield Half"),
(html! { <ShieldMinus /> }, "Shield Minus"),
(html! { <ShieldOff /> }, "Shield Off"),
(html! { <ShieldPlus /> }, "Shield Plus"),
(html! { <ShieldQuestion /> }, "Shield Question"),
(html! { <ShieldX /> }, "Shield X"),
(html! { <Ship /> }, "Ship"),
(html! { <ShipWheel /> }, "Ship Wheel"),
(html! { <Shirt /> }, "Shirt"),
(html! { <ShoppingBag /> }, "Shopping Bag"),
(html! { <ShoppingBasket /> }, "Shopping Basket"),
(html! { <ShoppingCart /> }, "Shopping Cart"),
(html! { <Shovel /> }, "Shovel"),
(html! { <ShowerHead /> }, "Shower Head"),
(html! { <Shrink /> }, "Shrink"),
(html! { <Shrub /> }, "Shrub"),
(html! { <Shuffle /> }, "Shuffle"),
(html! { <Sigma /> }, "Sigma"),
(html! { <Signal /> }, "Signal"),
(html! { <SignalHigh /> }, "Signal High"),
(html! { <SignalLow /> }, "Signal Low"),
(html! { <SignalMedium /> }, "Signal Medium"),
(html! { <SignalZero /> }, "Signal Zero"),
(html! { <Signature /> }, "Signature"),
(html! { <Signpost /> }, "Signpost"),
(html! { <SignpostBig /> }, "Signpost Big"),
(html! { <Siren /> }, "Siren"),
(html! { <SkipBack /> }, "Skip Back"),
(html! { <SkipForward /> }, "Skip Forward"),
(html! { <Skull /> }, "Skull"),
(html! { <Slack /> }, "Slack"),
(html! { <Slash /> }, "Slash"),
(html! { <Slice /> }, "Slice"),
(html! { <SlidersHorizontal /> }, "Sliders Horizontal"),
(html! { <SlidersVertical /> }, "Sliders Vertical"),
(html! { <Smartphone /> }, "Smartphone"),
(html! { <SmartphoneCharging /> }, "Smartphone Charging"),
(html! { <SmartphoneNfc /> }, "Smartphone Nfc"),
(html! { <Smile /> }, "Smile"),
(html! { <SmilePlus /> }, "Smile Plus"),
(html! { <Snail /> }, "Snail"),
(html! { <Snowflake /> }, "Snowflake"),
(html! { <Sofa /> }, "Sofa"),
(html! { <Soup /> }, "Soup"),
(html! { <Space /> }, "Space"),
(html! { <Spade /> }, "Spade"),
(html! { <Sparkle /> }, "Sparkle"),
(html! { <Sparkles /> }, "Sparkles"),
(html! { <Speaker /> }, "Speaker"),
(html! { <Speech /> }, "Speech"),
(html! { <SpellCheck /> }, "Spell Check"),
(html! { <SpellCheck2 /> }, "Spell Check 2"),
(html! { <Spline /> }, "Spline"),
(html! { <Split /> }, "Split"),
(html! { <SprayCan /> }, "Spray Can"),
(html! { <Sprout /> }, "Sprout"),
(html! { <Square /> }, "Square"),
(html! { <SquareActivity /> }, "Square Activity"),
(html! { <SquareArrowDown /> }, "Square Arrow Down"),
(html! { <SquareArrowDownLeft /> }, "Square Arrow Down Left"),
(
html! { <SquareArrowDownRight /> },
"Square Arrow Down Right",
),
(html! { <SquareArrowLeft /> }, "Square Arrow Left"),
(
html! { <SquareArrowOutDownLeft /> },
"Square Arrow Out Down Left",
),
(
html! { <SquareArrowOutDownRight /> },
"Square Arrow Out Down Right",
),
(
html! { <SquareArrowOutUpLeft /> },
"Square Arrow Out Up Left",
),
(
html! { <SquareArrowOutUpRight /> },
"Square Arrow Out Up Right",
),
(html! { <SquareArrowRight /> }, "Square Arrow Right"),
(html! { <SquareArrowUp /> }, "Square Arrow Up"),
(html! { <SquareArrowUpLeft /> }, "Square Arrow Up Left"),
(html! { <SquareArrowUpRight /> }, "Square Arrow Up Right"),
(html! { <SquareAsterisk /> }, "Square Asterisk"),
(
html! { <SquareBottomDashedScissors /> },
"Square Bottom Dashed Scissors",
),
(html! { <SquareChartGantt /> }, "Square Chart Gantt"),
(html! { <SquareCheck /> }, "Square Check"),
(html! { <SquareCheckBig /> }, "Square Check Big"),
(html! { <SquareChevronDown /> }, "Square Chevron Down"),
(html! { <SquareChevronLeft /> }, "Square Chevron Left"),
(html! { <SquareChevronRight /> }, "Square Chevron Right"),
(html! { <SquareChevronUp /> }, "Square Chevron Up"),
(html! { <SquareCode /> }, "Square Code"),
(html! { <SquareDashed /> }, "Square Dashed"),
(html! { <SquareDashedBottom /> }, "Square Dashed Bottom"),
(
html! { <SquareDashedBottomCode /> },
"Square Dashed Bottom Code",
),
(html! { <SquareDashedKanban /> }, "Square Dashed Kanban"),
(
html! { <SquareDashedMousePointer /> },
"Square Dashed Mouse Pointer",
),
(html! { <SquareDivide /> }, "Square Divide"),
(html! { <SquareDot /> }, "Square Dot"),
(html! { <SquareEqual /> }, "Square Equal"),
(html! { <SquareFunction /> }, "Square Function"),
(html! { <SquareKanban /> }, "Square Kanban"),
(html! { <SquareLibrary /> }, "Square Library"),
(html! { <SquareM /> }, "Square M"),
(html! { <SquareMenu /> }, "Square Menu"),
(html! { <SquareMinus /> }, "Square Minus"),
(html! { <SquareMousePointer /> }, "Square Mouse Pointer"),
(html! { <SquareParking /> }, "Square Parking"),
(html! { <SquareParkingOff /> }, "Square Parking Off"),
(html! { <SquarePen /> }, "Square Pen"),
(html! { <SquarePercent /> }, "Square Percent"),
(html! { <SquarePi /> }, "Square Pi"),
(html! { <SquarePilcrow /> }, "Square Pilcrow"),
(html! { <SquarePlay /> }, "Square Play"),
(html! { <SquarePlus /> }, "Square Plus"),
(html! { <SquarePower /> }, "Square Power"),
(html! { <SquareRadical /> }, "Square Radical"),
(html! { <SquareScissors /> }, "Square Scissors"),
(html! { <SquareSigma /> }, "Square Sigma"),
(html! { <SquareSlash /> }, "Square Slash"),
(
html! { <SquareSplitHorizontal /> },
"Square Split Horizontal",
),
(html! { <SquareSplitVertical /> }, "Square Split Vertical"),
(html! { <SquareSquare /> }, "Square Square"),
(html! { <SquareStack /> }, "Square Stack"),
(html! { <SquareTerminal /> }, "Square Terminal"),
(html! { <SquareUser /> }, "Square User"),
(html! { <SquareUserRound /> }, "Square User Round"),
(html! { <SquareX /> }, "Square X"),
(html! { <Squircle /> }, "Squircle"),
(html! { <Squirrel /> }, "Squirrel"),
(html! { <Stamp /> }, "Stamp"),
(html! { <Star /> }, "Star"),
(html! { <StarHalf /> }, "Star Half"),
(html! { <StarOff /> }, "Star Off"),
(html! { <StepBack /> }, "Step Back"),
(html! { <StepForward /> }, "Step Forward"),
(html! { <Stethoscope /> }, "Stethoscope"),
(html! { <Sticker /> }, "Sticker"),
(html! { <StickyNote /> }, "Sticky Note"),
(html! { <Store /> }, "Store"),
(html! { <StretchHorizontal /> }, "Stretch Horizontal"),
(html! { <StretchVertical /> }, "Stretch Vertical"),
(html! { <Strikethrough /> }, "Strikethrough"),
(html! { <Subscript /> }, "Subscript"),
(html! { <Sun /> }, "Sun"),
(html! { <SunDim /> }, "Sun Dim"),
(html! { <SunMedium /> }, "Sun Medium"),
(html! { <SunMoon /> }, "Sun Moon"),
(html! { <SunSnow /> }, "Sun Snow"),
(html! { <Sunrise /> }, "Sunrise"),
(html! { <Sunset /> }, "Sunset"),
(html! { <Superscript /> }, "Superscript"),
(html! { <SwatchBook /> }, "Swatch Book"),
(html! { <SwissFranc /> }, "Swiss Franc"),
(html! { <SwitchCamera /> }, "Switch Camera"),
(html! { <Sword /> }, "Sword"),
(html! { <Swords /> }, "Swords"),
(html! { <Syringe /> }, "Syringe"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsT() -> Html {
let icons = [
(html! { <Table /> }, "Table"),
(html! { <Table2 /> }, "Table 2"),
(html! { <TableCellsMerge /> }, "Table Cells Merge"),
(html! { <TableCellsSplit /> }, "Table Cells Split"),
(html! { <TableColumnsSplit /> }, "Table Columns Split"),
(html! { <TableOfContents /> }, "Table Of Contents"),
(html! { <TableProperties /> }, "Table Properties"),
(html! { <TableRowsSplit /> }, "Table Rows Split"),
(html! { <Tablet /> }, "Tablet"),
(html! { <TabletSmartphone /> }, "Tablet Smartphone"),
(html! { <Tablets /> }, "Tablets"),
(html! { <Tag /> }, "Tag"),
(html! { <Tags /> }, "Tags"),
(html! { <Tally1 /> }, "Tally 1"),
(html! { <Tally2 /> }, "Tally 2"),
(html! { <Tally3 /> }, "Tally 3"),
(html! { <Tally4 /> }, "Tally 4"),
(html! { <Tally5 /> }, "Tally 5"),
(html! { <Tangent /> }, "Tangent"),
(html! { <Target /> }, "Target"),
(html! { <Telescope /> }, "Telescope"),
(html! { <Tent /> }, "Tent"),
(html! { <TentTree /> }, "Tent Tree"),
(html! { <Terminal /> }, "Terminal"),
(html! { <TestTube /> }, "Test Tube"),
(html! { <TestTubeDiagonal /> }, "Test Tube Diagonal"),
(html! { <TestTubes /> }, "Test Tubes"),
(html! { <Text /> }, "Text"),
(html! { <TextCursor /> }, "Text Cursor"),
(html! { <TextCursorInput /> }, "Text Cursor Input"),
(html! { <TextQuote /> }, "Text Quote"),
(html! { <TextSearch /> }, "Text Search"),
(html! { <TextSelect /> }, "Text Select"),
(html! { <Theater /> }, "Theater"),
(html! { <Thermometer /> }, "Thermometer"),
(html! { <ThermometerSnowflake /> }, "Thermometer Snowflake"),
(html! { <ThermometerSun /> }, "Thermometer Sun"),
(html! { <ThumbsDown /> }, "Thumbs Down"),
(html! { <ThumbsUp /> }, "Thumbs Up"),
(html! { <Ticket /> }, "Ticket"),
(html! { <TicketCheck /> }, "Ticket Check"),
(html! { <TicketMinus /> }, "Ticket Minus"),
(html! { <TicketPercent /> }, "Ticket Percent"),
(html! { <TicketPlus /> }, "Ticket Plus"),
(html! { <TicketSlash /> }, "Ticket Slash"),
(html! { <TicketX /> }, "Ticket X"),
(html! { <Tickets /> }, "Tickets"),
(html! { <TicketsPlane /> }, "Tickets Plane"),
(html! { <Timer /> }, "Timer"),
(html! { <TimerOff /> }, "Timer Off"),
(html! { <TimerReset /> }, "Timer Reset"),
(html! { <ToggleLeft /> }, "Toggle Left"),
(html! { <ToggleRight /> }, "Toggle Right"),
(html! { <Toilet /> }, "Toilet"),
(html! { <Tornado /> }, "Tornado"),
(html! { <Torus /> }, "Torus"),
(html! { <Touchpad /> }, "Touchpad"),
(html! { <TouchpadOff /> }, "Touchpad Off"),
(html! { <TowerControl /> }, "Tower Control"),
(html! { <ToyBrick /> }, "Toy Brick"),
(html! { <Tractor /> }, "Tractor"),
(html! { <TrafficCone /> }, "Traffic Cone"),
(html! { <TrainFront /> }, "Train Front"),
(html! { <TrainFrontTunnel /> }, "Train Front Tunnel"),
(html! { <TrainTrack /> }, "Train Track"),
(html! { <TramFront /> }, "Tram Front"),
(html! { <Trash /> }, "Trash"),
(html! { <Trash2 /> }, "Trash 2"),
(html! { <TreeDeciduous /> }, "Tree Deciduous"),
(html! { <TreePalm /> }, "Tree Palm"),
(html! { <TreePine /> }, "Tree Pine"),
(html! { <Trees /> }, "Trees"),
(html! { <Trello /> }, "Trello"),
(html! { <TrendingDown /> }, "Trending Down"),
(html! { <TrendingUp /> }, "Trending Up"),
(html! { <TrendingUpDown /> }, "Trending Up Down"),
(html! { <Triangle /> }, "Triangle"),
(html! { <TriangleAlert /> }, "Triangle Alert"),
(html! { <TriangleRight /> }, "Triangle Right"),
(html! { <Trophy /> }, "Trophy"),
(html! { <Truck /> }, "Truck"),
(html! { <Turtle /> }, "Turtle"),
(html! { <Tv /> }, "Tv"),
(html! { <TvMinimal /> }, "Tv Minimal"),
(html! { <TvMinimalPlay /> }, "Tv Minimal Play"),
(html! { <Twitch /> }, "Twitch"),
(html! { <Twitter /> }, "Twitter"),
(html! { <Type /> }, "Type"),
(html! { <TypeOutline /> }, "Type Outline"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsU() -> Html {
let icons = [
(html! { <Umbrella /> }, "Umbrella"),
(html! { <UmbrellaOff /> }, "Umbrella Off"),
(html! { <Underline /> }, "Underline"),
(html! { <Undo /> }, "Undo"),
(html! { <Undo2 /> }, "Undo 2"),
(html! { <UndoDot /> }, "Undo Dot"),
(html! { <UnfoldHorizontal /> }, "Unfold Horizontal"),
(html! { <UnfoldVertical /> }, "Unfold Vertical"),
(html! { <Ungroup /> }, "Ungroup"),
(html! { <University /> }, "University"),
(html! { <Unlink /> }, "Unlink"),
(html! { <Unlink2 /> }, "Unlink 2"),
(html! { <Unplug /> }, "Unplug"),
(html! { <Upload /> }, "Upload"),
(html! { <Usb /> }, "Usb"),
(html! { <User /> }, "User"),
(html! { <UserCheck /> }, "User Check"),
(html! { <UserCog /> }, "User Cog"),
(html! { <UserMinus /> }, "User Minus"),
(html! { <UserPen /> }, "User Pen"),
(html! { <UserPlus /> }, "User Plus"),
(html! { <UserRound /> }, "User Round"),
(html! { <UserRoundCheck /> }, "User Round Check"),
(html! { <UserRoundCog /> }, "User Round Cog"),
(html! { <UserRoundMinus /> }, "User Round Minus"),
(html! { <UserRoundPen /> }, "User Round Pen"),
(html! { <UserRoundPlus /> }, "User Round Plus"),
(html! { <UserRoundSearch /> }, "User Round Search"),
(html! { <UserRoundX /> }, "User Round X"),
(html! { <UserSearch /> }, "User Search"),
(html! { <UserX /> }, "User X"),
(html! { <Users /> }, "Users"),
(html! { <UsersRound /> }, "Users Round"),
(html! { <Utensils /> }, "Utensils"),
(html! { <UtensilsCrossed /> }, "Utensils Crossed"),
(html! { <UtilityPole /> }, "Utility Pole"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsV() -> Html {
let icons = [
(html! { <Variable /> }, "Variable"),
(html! { <Vault /> }, "Vault"),
(html! { <Vegan /> }, "Vegan"),
(html! { <VenetianMask /> }, "Venetian Mask"),
(html! { <Vibrate /> }, "Vibrate"),
(html! { <VibrateOff /> }, "Vibrate Off"),
(html! { <Video /> }, "Video"),
(html! { <VideoOff /> }, "Video Off"),
(html! { <Videotape /> }, "Videotape"),
(html! { <View /> }, "View"),
(html! { <Voicemail /> }, "Voicemail"),
(html! { <Volleyball /> }, "Volleyball"),
(html! { <Volume /> }, "Volume"),
(html! { <Volume1 /> }, "Volume 1"),
(html! { <Volume2 /> }, "Volume 2"),
(html! { <VolumeOff /> }, "Volume Off"),
(html! { <VolumeX /> }, "Volume X"),
(html! { <Vote /> }, "Vote"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsW() -> Html {
let icons = [
(html! { <Wallet /> }, "Wallet"),
(html! { <WalletCards /> }, "Wallet Cards"),
(html! { <WalletMinimal /> }, "Wallet Minimal"),
(html! { <Wallpaper /> }, "Wallpaper"),
(html! { <Wand /> }, "Wand"),
(html! { <WandSparkles /> }, "Wand Sparkles"),
(html! { <Warehouse /> }, "Warehouse"),
(html! { <WashingMachine /> }, "Washing Machine"),
(html! { <Watch /> }, "Watch"),
(html! { <Waves /> }, "Waves"),
(html! { <WavesLadder /> }, "Waves Ladder"),
(html! { <Waypoints /> }, "Waypoints"),
(html! { <Webcam /> }, "Webcam"),
(html! { <Webhook /> }, "Webhook"),
(html! { <WebhookOff /> }, "Webhook Off"),
(html! { <Weight /> }, "Weight"),
(html! { <Wheat /> }, "Wheat"),
(html! { <WheatOff /> }, "Wheat Off"),
(html! { <WholeWord /> }, "Whole Word"),
(html! { <Wifi /> }, "Wifi"),
(html! { <WifiHigh /> }, "Wifi High"),
(html! { <WifiLow /> }, "Wifi Low"),
(html! { <WifiOff /> }, "Wifi Off"),
(html! { <WifiZero /> }, "Wifi Zero"),
(html! { <Wind /> }, "Wind"),
(html! { <WindArrowDown /> }, "Wind Arrow Down"),
(html! { <Wine /> }, "Wine"),
(html! { <WineOff /> }, "Wine Off"),
(html! { <Workflow /> }, "Workflow"),
(html! { <Worm /> }, "Worm"),
(html! { <WrapText /> }, "Wrap Text"),
(html! { <Wrench /> }, "Wrench"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsX() -> Html {
let icons = [(html! { <X /> }, "X")];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsY() -> Html {
let icons = [(html! { <Youtube /> }, "Youtube")];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsZ() -> Html {
let icons = [
(html! { <Zap /> }, "Zap"),
(html! { <ZapOff /> }, "Zap Off"),
(html! { <ZoomIn /> }, "Zoom In"),
(html! { <ZoomOut /> }, "Zoom Out"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}