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 the 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
TODO
Props
TODO
Icons
use dioxus::prelude::*;
#[component]
pub fn Icons() -> Element {
rsx! {}
}
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! { <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! { <AlarmClock/> }.into_any(), "Alarm Clock"),
(view! { <AlarmSmoke/> }.into_any(), "Alarm Smoke"),
(view! { <Album/> }.into_any(), "Album"),
(view! { <AlignCenterHorizontal/> }.into_any(), "Align Center Horizontal"),
(view! { <AlignCenterVertical/> }.into_any(), "Align Center Vertical"),
(view! { <AlignCenter/> }.into_any(), "Align Center"),
(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! { <AppWindowMac/> }.into_any(), "App Window Mac"),
(view! { <AppWindow/> }.into_any(), "App Window"),
(view! { <Apple/> }.into_any(), "Apple"),
(view! { <ArchiveRestore/> }.into_any(), "Archive Restore"),
(view! { <ArchiveX/> }.into_any(), "Archive X"),
(view! { <Archive/> }.into_any(), "Archive"),
(view! { <Armchair/> }.into_any(), "Armchair"),
(view! { <ArrowBigDownDash/> }.into_any(), "Arrow Big Down Dash"),
(view! { <ArrowBigDown/> }.into_any(), "Arrow Big Down"),
(view! { <ArrowBigLeftDash/> }.into_any(), "Arrow Big Left Dash"),
(view! { <ArrowBigLeft/> }.into_any(), "Arrow Big Left"),
(view! { <ArrowBigRightDash/> }.into_any(), "Arrow Big Right Dash"),
(view! { <ArrowBigRight/> }.into_any(), "Arrow Big Right"),
(view! { <ArrowBigUpDash/> }.into_any(), "Arrow Big Up Dash"),
(view! { <ArrowBigUp/> }.into_any(), "Arrow Big Up"),
(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! { <ArrowDown/> }.into_any(), "Arrow Down"),
(view! { <ArrowLeftFromLine/> }.into_any(), "Arrow Left From Line"),
(view! { <ArrowLeftRight/> }.into_any(), "Arrow Left Right"),
(view! { <ArrowLeftToLine/> }.into_any(), "Arrow Left To Line"),
(view! { <ArrowLeft/> }.into_any(), "Arrow Left"),
(view! { <ArrowRightFromLine/> }.into_any(), "Arrow Right From Line"),
(view! { <ArrowRightLeft/> }.into_any(), "Arrow Right Left"),
(view! { <ArrowRightToLine/> }.into_any(), "Arrow Right To Line"),
(view! { <ArrowRight/> }.into_any(), "Arrow Right"),
(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! { <ArrowUp/> }.into_any(), "Arrow Up"),
(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! { <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! { <Badge/> }.into_any(), "Badge"),
(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! { <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! { <Battery/> }.into_any(), "Battery"),
(view! { <Beaker/> }.into_any(), "Beaker"),
(view! { <BeanOff/> }.into_any(), "Bean Off"),
(view! { <Bean/> }.into_any(), "Bean"),
(view! { <BedDouble/> }.into_any(), "Bed Double"),
(view! { <BedSingle/> }.into_any(), "Bed Single"),
(view! { <Bed/> }.into_any(), "Bed"),
(view! { <Beef/> }.into_any(), "Beef"),
(view! { <BeerOff/> }.into_any(), "Beer Off"),
(view! { <Beer/> }.into_any(), "Beer"),
(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! { <Bell/> }.into_any(), "Bell"),
(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! { <BluetoothConnected/> }.into_any(), "Bluetooth Connected"),
(view! { <BluetoothOff/> }.into_any(), "Bluetooth Off"),
(view! { <BluetoothSearching/> }.into_any(), "Bluetooth Searching"),
(view! { <Bluetooth/> }.into_any(), "Bluetooth"),
(view! { <Bold/> }.into_any(), "Bold"),
(view! { <Bolt/> }.into_any(), "Bolt"),
(view! { <Bomb/> }.into_any(), "Bomb"),
(view! { <Bone/> }.into_any(), "Bone"),
(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! { <BookOpenCheck/> }.into_any(), "Book Open Check"),
(view! { <BookOpenText/> }.into_any(), "Book Open Text"),
(view! { <BookOpen/> }.into_any(), "Book Open"),
(view! { <BookPlus/> }.into_any(), "Book Plus"),
(view! { <BookText/> }.into_any(), "Book Text"),
(view! { <BookType/> }.into_any(), "Book Type"),
(view! { <BookUp2/> }.into_any(), "Book Up 2"),
(view! { <BookUp/> }.into_any(), "Book Up"),
(view! { <BookUser/> }.into_any(), "Book User"),
(view! { <BookX/> }.into_any(), "Book X"),
(view! { <Book/> }.into_any(), "Book"),
(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! { <Bookmark/> }.into_any(), "Bookmark"),
(view! { <BoomBox/> }.into_any(), "Boom Box"),
(view! { <BotMessageSquare/> }.into_any(), "Bot Message Square"),
(view! { <BotOff/> }.into_any(), "Bot Off"),
(view! { <Bot/> }.into_any(), "Bot"),
(view! { <Box/> }.into_any(), "Box"),
(view! { <Boxes/> }.into_any(), "Boxes"),
(view! { <Braces/> }.into_any(), "Braces"),
(view! { <Brackets/> }.into_any(), "Brackets"),
(view! { <BrainCircuit/> }.into_any(), "Brain Circuit"),
(view! { <BrainCog/> }.into_any(), "Brain Cog"),
(view! { <Brain/> }.into_any(), "Brain"),
(view! { <BrickWall/> }.into_any(), "Brick Wall"),
(view! { <BriefcaseBusiness/> }.into_any(), "Briefcase Business"),
(view! { <BriefcaseConveyorBelt/> }.into_any(), "Briefcase Conveyor Belt"),
(view! { <BriefcaseMedical/> }.into_any(), "Briefcase Medical"),
(view! { <Briefcase/> }.into_any(), "Briefcase"),
(view! { <BringToFront/> }.into_any(), "Bring To Front"),
(view! { <Brush/> }.into_any(), "Brush"),
(view! { <BugOff/> }.into_any(), "Bug Off"),
(view! { <BugPlay/> }.into_any(), "Bug Play"),
(view! { <Bug/> }.into_any(), "Bug"),
(view! { <Building2/> }.into_any(), "Building 2"),
(view! { <Building/> }.into_any(), "Building"),
(view! { <BusFront/> }.into_any(), "Bus Front"),
(view! { <Bus/> }.into_any(), "Bus"),
]
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! { <CableCar/> }.into_any(), "Cable Car"),
(view! { <Cable/> }.into_any(), "Cable"),
(view! { <CakeSlice/> }.into_any(), "Cake Slice"),
(view! { <Cake/> }.into_any(), "Cake"),
(view! { <Calculator/> }.into_any(), "Calculator"),
(view! { <Calendar1/> }.into_any(), "Calendar 1"),
(view! { <CalendarArrowDown/> }.into_any(), "Calendar Arrow Down"),
(view! { <CalendarArrowUp/> }.into_any(), "Calendar Arrow Up"),
(view! { <CalendarCheck2/> }.into_any(), "Calendar Check 2"),
(view! { <CalendarCheck/> }.into_any(), "Calendar Check"),
(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! { <CalendarMinus2/> }.into_any(), "Calendar Minus 2"),
(view! { <CalendarMinus/> }.into_any(), "Calendar Minus"),
(view! { <CalendarOff/> }.into_any(), "Calendar Off"),
(view! { <CalendarPlus2/> }.into_any(), "Calendar Plus 2"),
(view! { <CalendarPlus/> }.into_any(), "Calendar Plus"),
(view! { <CalendarRange/> }.into_any(), "Calendar Range"),
(view! { <CalendarSearch/> }.into_any(), "Calendar Search"),
(view! { <CalendarX2/> }.into_any(), "Calendar X 2"),
(view! { <CalendarX/> }.into_any(), "Calendar X"),
(view! { <Calendar/> }.into_any(), "Calendar"),
(view! { <CameraOff/> }.into_any(), "Camera Off"),
(view! { <Camera/> }.into_any(), "Camera"),
(view! { <CandyCane/> }.into_any(), "Candy Cane"),
(view! { <CandyOff/> }.into_any(), "Candy Off"),
(view! { <Candy/> }.into_any(), "Candy"),
(view! { <Cannabis/> }.into_any(), "Cannabis"),
(view! { <CaptionsOff/> }.into_any(), "Captions Off"),
(view! { <Captions/> }.into_any(), "Captions"),
(view! { <CarFront/> }.into_any(), "Car Front"),
(view! { <CarTaxiFront/> }.into_any(), "Car Taxi Front"),
(view! { <Car/> }.into_any(), "Car"),
(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! { <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! { <ChartBar/> }.into_any(), "Chart Bar"),
(view! { <ChartCandlestick/> }.into_any(), "Chart Candlestick"),
(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! { <ChartColumn/> }.into_any(), "Chart Column"),
(view! { <ChartGantt/> }.into_any(), "Chart Gantt"),
(view! { <ChartLine/> }.into_any(), "Chart Line"),
(view! { <ChartNetwork/> }.into_any(), "Chart Network"),
(
view! { <ChartNoAxesColumnDecreasing/> }.into_any(),
"Chart No Axes Column Decreasing",
),
(
view! { <ChartNoAxesColumnIncreasing/> }.into_any(),
"Chart No Axes Column Increasing",
),
(view! { <ChartNoAxesColumn/> }.into_any(), "Chart No Axes Column"),
(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! { <CheckCheck/> }.into_any(), "Check Check"),
(view! { <Check/> }.into_any(), "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! { <ChevronsDownUp/> }.into_any(), "Chevrons Down Up"),
(view! { <ChevronsDown/> }.into_any(), "Chevrons Down"),
(view! { <ChevronsLeftRightEllipsis/> }.into_any(), "Chevrons Left Right Ellipsis"),
(view! { <ChevronsLeftRight/> }.into_any(), "Chevrons Left Right"),
(view! { <ChevronsLeft/> }.into_any(), "Chevrons Left"),
(view! { <ChevronsRightLeft/> }.into_any(), "Chevrons Right Left"),
(view! { <ChevronsRight/> }.into_any(), "Chevrons Right"),
(view! { <ChevronsUpDown/> }.into_any(), "Chevrons Up Down"),
(view! { <ChevronsUp/> }.into_any(), "Chevrons Up"),
(view! { <Chrome/> }.into_any(), "Chrome"),
(view! { <Church/> }.into_any(), "Church"),
(view! { <CigaretteOff/> }.into_any(), "Cigarette Off"),
(view! { <Cigarette/> }.into_any(), "Cigarette"),
(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! { <CircleCheckBig/> }.into_any(), "Circle Check Big"),
(view! { <CircleCheck/> }.into_any(), "Circle Check"),
(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! { <CircleDotDashed/> }.into_any(), "Circle Dot Dashed"),
(view! { <CircleDot/> }.into_any(), "Circle Dot"),
(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! { <CircleParkingOff/> }.into_any(), "Circle Parking Off"),
(view! { <CircleParking/> }.into_any(), "Circle Parking"),
(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! { <CircleSlash2/> }.into_any(), "Circle Slash 2"),
(view! { <CircleSlash/> }.into_any(), "Circle Slash"),
(view! { <CircleStop/> }.into_any(), "Circle Stop"),
(view! { <CircleUserRound/> }.into_any(), "Circle User Round"),
(view! { <CircleUser/> }.into_any(), "Circle User"),
(view! { <CircleX/> }.into_any(), "Circle X"),
(view! { <Circle/> }.into_any(), "Circle"),
(view! { <CircuitBoard/> }.into_any(), "Circuit Board"),
(view! { <Citrus/> }.into_any(), "Citrus"),
(view! { <Clapperboard/> }.into_any(), "Clapperboard"),
(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! { <ClipboardPenLine/> }.into_any(), "Clipboard Pen Line"),
(view! { <ClipboardPen/> }.into_any(), "Clipboard Pen"),
(view! { <ClipboardPlus/> }.into_any(), "Clipboard Plus"),
(view! { <ClipboardType/> }.into_any(), "Clipboard Type"),
(view! { <ClipboardX/> }.into_any(), "Clipboard X"),
(view! { <Clipboard/> }.into_any(), "Clipboard"),
(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! { <Clock/> }.into_any(), "Clock"),
(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! { <CloudMoonRain/> }.into_any(), "Cloud Moon Rain"),
(view! { <CloudMoon/> }.into_any(), "Cloud Moon"),
(view! { <CloudOff/> }.into_any(), "Cloud Off"),
(view! { <CloudRainWind/> }.into_any(), "Cloud Rain Wind"),
(view! { <CloudRain/> }.into_any(), "Cloud Rain"),
(view! { <CloudSnow/> }.into_any(), "Cloud Snow"),
(view! { <CloudSunRain/> }.into_any(), "Cloud Sun Rain"),
(view! { <CloudSun/> }.into_any(), "Cloud Sun"),
(view! { <CloudUpload/> }.into_any(), "Cloud Upload"),
(view! { <Cloud/> }.into_any(), "Cloud"),
(view! { <Cloudy/> }.into_any(), "Cloudy"),
(view! { <Clover/> }.into_any(), "Clover"),
(view! { <Club/> }.into_any(), "Club"),
(view! { <CodeXml/> }.into_any(), "Code Xml"),
(view! { <Code/> }.into_any(), "Code"),
(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! { <ContactRound/> }.into_any(), "Contact Round"),
(view! { <Contact/> }.into_any(), "Contact"),
(view! { <Container/> }.into_any(), "Container"),
(view! { <Contrast/> }.into_any(), "Contrast"),
(view! { <Cookie/> }.into_any(), "Cookie"),
(view! { <CookingPot/> }.into_any(), "Cooking Pot"),
(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! { <Copy/> }.into_any(), "Copy"),
(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! { <DatabaseBackup/> }.into_any(), "Database Backup"),
(view! { <DatabaseZap/> }.into_any(), "Database Zap"),
(view! { <Database/> }.into_any(), "Database"),
(view! { <Delete/> }.into_any(), "Delete"),
(view! { <Dessert/> }.into_any(), "Dessert"),
(view! { <Diameter/> }.into_any(), "Diameter"),
(view! { <DiamondMinus/> }.into_any(), "Diamond Minus"),
(view! { <DiamondPercent/> }.into_any(), "Diamond Percent"),
(view! { <DiamondPlus/> }.into_any(), "Diamond Plus"),
(view! { <Diamond/> }.into_any(), "Diamond"),
(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! { <Disc2/> }.into_any(), "Disc 2"),
(view! { <Disc3/> }.into_any(), "Disc 3"),
(view! { <DiscAlbum/> }.into_any(), "Disc Album"),
(view! { <Disc/> }.into_any(), "Disc"),
(view! { <Divide/> }.into_any(), "Divide"),
(view! { <DnaOff/> }.into_any(), "Dna Off"),
(view! { <Dna/> }.into_any(), "Dna"),
(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! { <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! { <EarOff/> }.into_any(), "Ear Off"),
(view! { <Ear/> }.into_any(), "Ear"),
(view! { <EarthLock/> }.into_any(), "Earth Lock"),
(view! { <Earth/> }.into_any(), "Earth"),
(view! { <Eclipse/> }.into_any(), "Eclipse"),
(view! { <EggFried/> }.into_any(), "Egg Fried"),
(view! { <EggOff/> }.into_any(), "Egg Off"),
(view! { <Egg/> }.into_any(), "Egg"),
(view! { <EllipsisVertical/> }.into_any(), "Ellipsis Vertical"),
(view! { <Ellipsis/> }.into_any(), "Ellipsis"),
(view! { <EqualApproximately/> }.into_any(), "Equal Approximately"),
(view! { <EqualNot/> }.into_any(), "Equal Not"),
(view! { <Equal/> }.into_any(), "Equal"),
(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! { <EyeClosed/> }.into_any(), "Eye Closed"),
(view! { <EyeOff/> }.into_any(), "Eye Off"),
(view! { <Eye/> }.into_any(), "Eye"),
]
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! { <FileArchive/> }.into_any(), "File Archive"),
(view! { <FileAudio2/> }.into_any(), "File Audio 2"),
(view! { <FileAudio/> }.into_any(), "File Audio"),
(view! { <FileAxis3D/> }.into_any(), "File Axis 3 D"),
(view! { <FileBadge2/> }.into_any(), "File Badge 2"),
(view! { <FileBadge/> }.into_any(), "File Badge"),
(view! { <FileBox/> }.into_any(), "File Box"),
(view! { <FileChartColumnIncreasing/> }.into_any(), "File Chart Column Increasing"),
(view! { <FileChartColumn/> }.into_any(), "File Chart Column"),
(view! { <FileChartLine/> }.into_any(), "File Chart Line"),
(view! { <FileChartPie/> }.into_any(), "File Chart Pie"),
(view! { <FileCheck2/> }.into_any(), "File Check 2"),
(view! { <FileCheck/> }.into_any(), "File Check"),
(view! { <FileClock/> }.into_any(), "File Clock"),
(view! { <FileCode2/> }.into_any(), "File Code 2"),
(view! { <FileCode/> }.into_any(), "File Code"),
(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! { <FileJson2/> }.into_any(), "File Json 2"),
(view! { <FileJson/> }.into_any(), "File Json"),
(view! { <FileKey2/> }.into_any(), "File Key 2"),
(view! { <FileKey/> }.into_any(), "File Key"),
(view! { <FileLock2/> }.into_any(), "File Lock 2"),
(view! { <FileLock/> }.into_any(), "File Lock"),
(view! { <FileMinus2/> }.into_any(), "File Minus 2"),
(view! { <FileMinus/> }.into_any(), "File Minus"),
(view! { <FileMusic/> }.into_any(), "File Music"),
(view! { <FileOutput/> }.into_any(), "File Output"),
(view! { <FilePenLine/> }.into_any(), "File Pen Line"),
(view! { <FilePen/> }.into_any(), "File Pen"),
(view! { <FilePlus2/> }.into_any(), "File Plus 2"),
(view! { <FilePlus/> }.into_any(), "File Plus"),
(view! { <FileQuestion/> }.into_any(), "File Question"),
(view! { <FileScan/> }.into_any(), "File Scan"),
(view! { <FileSearch2/> }.into_any(), "File Search 2"),
(view! { <FileSearch/> }.into_any(), "File Search"),
(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! { <FileType2/> }.into_any(), "File Type 2"),
(view! { <FileType/> }.into_any(), "File Type"),
(view! { <FileUp/> }.into_any(), "File Up"),
(view! { <FileUser/> }.into_any(), "File User"),
(view! { <FileVideo2/> }.into_any(), "File Video 2"),
(view! { <FileVideo/> }.into_any(), "File Video"),
(view! { <FileVolume2/> }.into_any(), "File Volume 2"),
(view! { <FileVolume/> }.into_any(), "File Volume"),
(view! { <FileWarning/> }.into_any(), "File Warning"),
(view! { <FileX2/> }.into_any(), "File X 2"),
(view! { <FileX/> }.into_any(), "File X"),
(view! { <File/> }.into_any(), "File"),
(view! { <Files/> }.into_any(), "Files"),
(view! { <Film/> }.into_any(), "Film"),
(view! { <FilterX/> }.into_any(), "Filter X"),
(view! { <Filter/> }.into_any(), "Filter"),
(view! { <Fingerprint/> }.into_any(), "Fingerprint"),
(view! { <FireExtinguisher/> }.into_any(), "Fire Extinguisher"),
(view! { <FishOff/> }.into_any(), "Fish Off"),
(view! { <FishSymbol/> }.into_any(), "Fish Symbol"),
(view! { <Fish/> }.into_any(), "Fish"),
(view! { <FlagOff/> }.into_any(), "Flag Off"),
(view! { <FlagTriangleLeft/> }.into_any(), "Flag Triangle Left"),
(view! { <FlagTriangleRight/> }.into_any(), "Flag Triangle Right"),
(view! { <Flag/> }.into_any(), "Flag"),
(view! { <FlameKindling/> }.into_any(), "Flame Kindling"),
(view! { <Flame/> }.into_any(), "Flame"),
(view! { <FlashlightOff/> }.into_any(), "Flashlight Off"),
(view! { <Flashlight/> }.into_any(), "Flashlight"),
(view! { <FlaskConicalOff/> }.into_any(), "Flask Conical Off"),
(view! { <FlaskConical/> }.into_any(), "Flask Conical"),
(view! { <FlaskRound/> }.into_any(), "Flask Round"),
(view! { <FlipHorizontal2/> }.into_any(), "Flip Horizontal 2"),
(view! { <FlipHorizontal/> }.into_any(), "Flip Horizontal"),
(view! { <FlipVertical2/> }.into_any(), "Flip Vertical 2"),
(view! { <FlipVertical/> }.into_any(), "Flip Vertical"),
(view! { <Flower2/> }.into_any(), "Flower 2"),
(view! { <Flower/> }.into_any(), "Flower"),
(view! { <Focus/> }.into_any(), "Focus"),
(view! { <FoldHorizontal/> }.into_any(), "Fold Horizontal"),
(view! { <FoldVertical/> }.into_any(), "Fold Vertical"),
(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! { <FolderGit2/> }.into_any(), "Folder Git 2"),
(view! { <FolderGit/> }.into_any(), "Folder Git"),
(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! { <FolderOpenDot/> }.into_any(), "Folder Open Dot"),
(view! { <FolderOpen/> }.into_any(), "Folder Open"),
(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! { <FolderSearch2/> }.into_any(), "Folder Search 2"),
(view! { <FolderSearch/> }.into_any(), "Folder Search"),
(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! { <Folder/> }.into_any(), "Folder"),
(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! { <GalleryHorizontalEnd/> }.into_any(), "Gallery Horizontal End"),
(view! { <GalleryHorizontal/> }.into_any(), "Gallery Horizontal"),
(view! { <GalleryThumbnails/> }.into_any(), "Gallery Thumbnails"),
(view! { <GalleryVerticalEnd/> }.into_any(), "Gallery Vertical End"),
(view! { <GalleryVertical/> }.into_any(), "Gallery Vertical"),
(view! { <Gamepad2/> }.into_any(), "Gamepad 2"),
(view! { <Gamepad/> }.into_any(), "Gamepad"),
(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! { <GitBranchPlus/> }.into_any(), "Git Branch Plus"),
(view! { <GitBranch/> }.into_any(), "Git Branch"),
(view! { <GitCommitHorizontal/> }.into_any(), "Git Commit Horizontal"),
(view! { <GitCommitVertical/> }.into_any(), "Git Commit Vertical"),
(view! { <GitCompareArrows/> }.into_any(), "Git Compare Arrows"),
(view! { <GitCompare/> }.into_any(), "Git Compare"),
(view! { <GitFork/> }.into_any(), "Git Fork"),
(view! { <GitGraph/> }.into_any(), "Git Graph"),
(view! { <GitMerge/> }.into_any(), "Git Merge"),
(view! { <GitPullRequestArrow/> }.into_any(), "Git Pull Request Arrow"),
(view! { <GitPullRequestClosed/> }.into_any(), "Git Pull Request Closed"),
(
view! { <GitPullRequestCreateArrow/> }.into_any(),
"Git Pull Request Create Arrow",
),
(view! { <GitPullRequestCreate/> }.into_any(), "Git Pull Request Create"),
(view! { <GitPullRequestDraft/> }.into_any(), "Git Pull Request Draft"),
(view! { <GitPullRequest/> }.into_any(), "Git Pull Request"),
(view! { <Github/> }.into_any(), "Github"),
(view! { <Gitlab/> }.into_any(), "Gitlab"),
(view! { <GlassWater/> }.into_any(), "Glass Water"),
(view! { <Glasses/> }.into_any(), "Glasses"),
(view! { <GlobeLock/> }.into_any(), "Globe Lock"),
(view! { <Globe/> }.into_any(), "Globe"),
(view! { <Goal/> }.into_any(), "Goal"),
(view! { <Grab/> }.into_any(), "Grab"),
(view! { <GraduationCap/> }.into_any(), "Graduation Cap"),
(view! { <Grape/> }.into_any(), "Grape"),
(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! { <Grid2X2/> }.into_any(), "Grid 2 X 2"),
(view! { <Grid3X3/> }.into_any(), "Grid 3 X 3"),
(view! { <GripHorizontal/> }.into_any(), "Grip Horizontal"),
(view! { <GripVertical/> }.into_any(), "Grip Vertical"),
(view! { <Grip/> }.into_any(), "Grip"),
(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! { <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! { <Hand/> }.into_any(), "Hand"),
(view! { <Handshake/> }.into_any(), "Handshake"),
(view! { <HardDriveDownload/> }.into_any(), "Hard Drive Download"),
(view! { <HardDriveUpload/> }.into_any(), "Hard Drive Upload"),
(view! { <HardDrive/> }.into_any(), "Hard Drive"),
(view! { <HardHat/> }.into_any(), "Hard Hat"),
(view! { <Hash/> }.into_any(), "Hash"),
(view! { <Haze/> }.into_any(), "Haze"),
(view! { <HdmiPort/> }.into_any(), "Hdmi Port"),
(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! { <Heading/> }.into_any(), "Heading"),
(view! { <HeadphoneOff/> }.into_any(), "Headphone Off"),
(view! { <Headphones/> }.into_any(), "Headphones"),
(view! { <Headset/> }.into_any(), "Headset"),
(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! { <Heart/> }.into_any(), "Heart"),
(view! { <Heater/> }.into_any(), "Heater"),
(view! { <Hexagon/> }.into_any(), "Hexagon"),
(view! { <Highlighter/> }.into_any(), "Highlighter"),
(view! { <History/> }.into_any(), "History"),
(view! { <HopOff/> }.into_any(), "Hop Off"),
(view! { <Hop/> }.into_any(), "Hop"),
(view! { <Hospital/> }.into_any(), "Hospital"),
(view! { <Hotel/> }.into_any(), "Hotel"),
(view! { <Hourglass/> }.into_any(), "Hourglass"),
(view! { <HousePlug/> }.into_any(), "House Plug"),
(view! { <HousePlus/> }.into_any(), "House Plus"),
(view! { <House/> }.into_any(), "House"),
]
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! { <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! { <Image/> }.into_any(), "Image"),
(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! { <KeyRound/> }.into_any(), "Key Round"),
(view! { <KeySquare/> }.into_any(), "Key Square"),
(view! { <Key/> }.into_any(), "Key"),
(view! { <KeyboardMusic/> }.into_any(), "Keyboard Music"),
(view! { <KeyboardOff/> }.into_any(), "Keyboard Off"),
(view! { <Keyboard/> }.into_any(), "Keyboard"),
]
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! { <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! { <Lamp/> }.into_any(), "Lamp"),
(view! { <LandPlot/> }.into_any(), "Land Plot"),
(view! { <Landmark/> }.into_any(), "Landmark"),
(view! { <Languages/> }.into_any(), "Languages"),
(view! { <LaptopMinimalCheck/> }.into_any(), "Laptop Minimal Check"),
(view! { <LaptopMinimal/> }.into_any(), "Laptop Minimal"),
(view! { <Laptop/> }.into_any(), "Laptop"),
(view! { <LassoSelect/> }.into_any(), "Lasso Select"),
(view! { <Lasso/> }.into_any(), "Lasso"),
(view! { <Laugh/> }.into_any(), "Laugh"),
(view! { <Layers2/> }.into_any(), "Layers 2"),
(view! { <Layers3/> }.into_any(), "Layers 3"),
(view! { <Layers/> }.into_any(), "Layers"),
(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! { <LibraryBig/> }.into_any(), "Library Big"),
(view! { <Library/> }.into_any(), "Library"),
(view! { <LifeBuoy/> }.into_any(), "Life Buoy"),
(view! { <Ligature/> }.into_any(), "Ligature"),
(view! { <LightbulbOff/> }.into_any(), "Lightbulb Off"),
(view! { <Lightbulb/> }.into_any(), "Lightbulb"),
(view! { <Link2Off/> }.into_any(), "Link 2 Off"),
(view! { <Link2/> }.into_any(), "Link 2"),
(view! { <Link/> }.into_any(), "Link"),
(view! { <Linkedin/> }.into_any(), "Linkedin"),
(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! { <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! { <List/> }.into_any(), "List"),
(view! { <LoaderCircle/> }.into_any(), "Loader Circle"),
(view! { <LoaderPinwheel/> }.into_any(), "Loader Pinwheel"),
(view! { <Loader/> }.into_any(), "Loader"),
(view! { <LocateFixed/> }.into_any(), "Locate Fixed"),
(view! { <LocateOff/> }.into_any(), "Locate Off"),
(view! { <Locate/> }.into_any(), "Locate"),
(view! { <LockKeyholeOpen/> }.into_any(), "Lock Keyhole Open"),
(view! { <LockKeyhole/> }.into_any(), "Lock Keyhole"),
(view! { <LockOpen/> }.into_any(), "Lock Open"),
(view! { <Lock/> }.into_any(), "Lock"),
(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! { <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! { <Mail/> }.into_any(), "Mail"),
(view! { <Mailbox/> }.into_any(), "Mailbox"),
(view! { <Mails/> }.into_any(), "Mails"),
(view! { <MapPinCheckInside/> }.into_any(), "Map Pin Check Inside"),
(view! { <MapPinCheck/> }.into_any(), "Map Pin Check"),
(view! { <MapPinHouse/> }.into_any(), "Map Pin House"),
(view! { <MapPinMinusInside/> }.into_any(), "Map Pin Minus Inside"),
(view! { <MapPinMinus/> }.into_any(), "Map Pin Minus"),
(view! { <MapPinOff/> }.into_any(), "Map Pin Off"),
(view! { <MapPinPlusInside/> }.into_any(), "Map Pin Plus Inside"),
(view! { <MapPinPlus/> }.into_any(), "Map Pin Plus"),
(view! { <MapPinXInside/> }.into_any(), "Map Pin X Inside"),
(view! { <MapPinX/> }.into_any(), "Map Pin X"),
(view! { <MapPin/> }.into_any(), "Map Pin"),
(view! { <MapPinned/> }.into_any(), "Map Pinned"),
(view! { <Map/> }.into_any(), "Map"),
(view! { <Martini/> }.into_any(), "Martini"),
(view! { <Maximize2/> }.into_any(), "Maximize 2"),
(view! { <Maximize/> }.into_any(), "Maximize"),
(view! { <Medal/> }.into_any(), "Medal"),
(view! { <MegaphoneOff/> }.into_any(), "Megaphone Off"),
(view! { <Megaphone/> }.into_any(), "Megaphone"),
(view! { <Meh/> }.into_any(), "Meh"),
(view! { <MemoryStick/> }.into_any(), "Memory Stick"),
(view! { <Menu/> }.into_any(), "Menu"),
(view! { <Merge/> }.into_any(), "Merge"),
(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! { <MessageCircle/> }.into_any(), "Message Circle"),
(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! { <MessageSquare/> }.into_any(), "Message Square"),
(view! { <MessagesSquare/> }.into_any(), "Messages Square"),
(view! { <MicOff/> }.into_any(), "Mic Off"),
(view! { <MicVocal/> }.into_any(), "Mic Vocal"),
(view! { <Mic/> }.into_any(), "Mic"),
(view! { <Microchip/> }.into_any(), "Microchip"),
(view! { <Microscope/> }.into_any(), "Microscope"),
(view! { <Microwave/> }.into_any(), "Microwave"),
(view! { <Milestone/> }.into_any(), "Milestone"),
(view! { <MilkOff/> }.into_any(), "Milk Off"),
(view! { <Milk/> }.into_any(), "Milk"),
(view! { <Minimize2/> }.into_any(), "Minimize 2"),
(view! { <Minimize/> }.into_any(), "Minimize"),
(view! { <Minus/> }.into_any(), "Minus"),
(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! { <Monitor/> }.into_any(), "Monitor"),
(view! { <MoonStar/> }.into_any(), "Moon Star"),
(view! { <Moon/> }.into_any(), "Moon"),
(view! { <MountainSnow/> }.into_any(), "Mountain Snow"),
(view! { <Mountain/> }.into_any(), "Mountain"),
(view! { <MouseOff/> }.into_any(), "Mouse Off"),
(view! { <MousePointer2/> }.into_any(), "Mouse Pointer 2"),
(view! { <MousePointerBan/> }.into_any(), "Mouse Pointer Ban"),
(view! { <MousePointerClick/> }.into_any(), "Mouse Pointer Click"),
(view! { <MousePointer/> }.into_any(), "Mouse Pointer"),
(view! { <Mouse/> }.into_any(), "Mouse"),
(view! { <Move3D/> }.into_any(), "Move 3 D"),
(view! { <MoveDiagonal2/> }.into_any(), "Move Diagonal 2"),
(view! { <MoveDiagonal/> }.into_any(), "Move Diagonal"),
(view! { <MoveDownLeft/> }.into_any(), "Move Down Left"),
(view! { <MoveDownRight/> }.into_any(), "Move Down Right"),
(view! { <MoveDown/> }.into_any(), "Move Down"),
(view! { <MoveHorizontal/> }.into_any(), "Move Horizontal"),
(view! { <MoveLeft/> }.into_any(), "Move Left"),
(view! { <MoveRight/> }.into_any(), "Move Right"),
(view! { <MoveUpLeft/> }.into_any(), "Move Up Left"),
(view! { <MoveUpRight/> }.into_any(), "Move Up Right"),
(view! { <MoveUp/> }.into_any(), "Move Up"),
(view! { <MoveVertical/> }.into_any(), "Move Vertical"),
(view! { <Move/> }.into_any(), "Move"),
(view! { <Music2/> }.into_any(), "Music 2"),
(view! { <Music3/> }.into_any(), "Music 3"),
(view! { <Music4/> }.into_any(), "Music 4"),
(view! { <Music/> }.into_any(), "Music"),
]
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! { <Navigation2Off/> }.into_any(), "Navigation 2 Off"),
(view! { <Navigation2/> }.into_any(), "Navigation 2"),
(view! { <NavigationOff/> }.into_any(), "Navigation Off"),
(view! { <Navigation/> }.into_any(), "Navigation"),
(view! { <Network/> }.into_any(), "Network"),
(view! { <Newspaper/> }.into_any(), "Newspaper"),
(view! { <Nfc/> }.into_any(), "Nfc"),
(view! { <NotebookPen/> }.into_any(), "Notebook Pen"),
(view! { <NotebookTabs/> }.into_any(), "Notebook Tabs"),
(view! { <NotebookText/> }.into_any(), "Notebook Text"),
(view! { <Notebook/> }.into_any(), "Notebook"),
(view! { <NotepadTextDashed/> }.into_any(), "Notepad Text Dashed"),
(view! { <NotepadText/> }.into_any(), "Notepad Text"),
(view! { <NutOff/> }.into_any(), "Nut Off"),
(view! { <Nut/> }.into_any(), "Nut"),
]
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! { <OctagonAlert/> }.into_any(), "Octagon Alert"),
(view! { <OctagonMinus/> }.into_any(), "Octagon Minus"),
(view! { <OctagonPause/> }.into_any(), "Octagon Pause"),
(view! { <OctagonX/> }.into_any(), "Octagon X"),
(view! { <Octagon/> }.into_any(), "Octagon"),
(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! { <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! { <Package/> }.into_any(), "Package"),
(view! { <PaintBucket/> }.into_any(), "Paint Bucket"),
(view! { <PaintRoller/> }.into_any(), "Paint Roller"),
(view! { <PaintbrushVertical/> }.into_any(), "Paintbrush Vertical"),
(view! { <Paintbrush/> }.into_any(), "Paintbrush"),
(view! { <Palette/> }.into_any(), "Palette"),
(view! { <PanelBottomClose/> }.into_any(), "Panel Bottom Close"),
(view! { <PanelBottomDashed/> }.into_any(), "Panel Bottom Dashed"),
(view! { <PanelBottomOpen/> }.into_any(), "Panel Bottom Open"),
(view! { <PanelBottom/> }.into_any(), "Panel Bottom"),
(view! { <PanelLeftClose/> }.into_any(), "Panel Left Close"),
(view! { <PanelLeftDashed/> }.into_any(), "Panel Left Dashed"),
(view! { <PanelLeftOpen/> }.into_any(), "Panel Left Open"),
(view! { <PanelLeft/> }.into_any(), "Panel Left"),
(view! { <PanelRightClose/> }.into_any(), "Panel Right Close"),
(view! { <PanelRightDashed/> }.into_any(), "Panel Right Dashed"),
(view! { <PanelRightOpen/> }.into_any(), "Panel Right Open"),
(view! { <PanelRight/> }.into_any(), "Panel Right"),
(view! { <PanelTopClose/> }.into_any(), "Panel Top Close"),
(view! { <PanelTopDashed/> }.into_any(), "Panel Top Dashed"),
(view! { <PanelTopOpen/> }.into_any(), "Panel Top Open"),
(view! { <PanelTop/> }.into_any(), "Panel Top"),
(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! { <PenLine/> }.into_any(), "Pen Line"),
(view! { <PenOff/> }.into_any(), "Pen Off"),
(view! { <PenTool/> }.into_any(), "Pen Tool"),
(view! { <Pen/> }.into_any(), "Pen"),
(view! { <PencilLine/> }.into_any(), "Pencil Line"),
(view! { <PencilOff/> }.into_any(), "Pencil Off"),
(view! { <PencilRuler/> }.into_any(), "Pencil Ruler"),
(view! { <Pencil/> }.into_any(), "Pencil"),
(view! { <Pentagon/> }.into_any(), "Pentagon"),
(view! { <Percent/> }.into_any(), "Percent"),
(view! { <PersonStanding/> }.into_any(), "Person Standing"),
(view! { <PhilippinePeso/> }.into_any(), "Philippine Peso"),
(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! { <Phone/> }.into_any(), "Phone"),
(view! { <Pi/> }.into_any(), "Pi"),
(view! { <Piano/> }.into_any(), "Piano"),
(view! { <Pickaxe/> }.into_any(), "Pickaxe"),
(view! { <PictureInPicture2/> }.into_any(), "Picture In Picture 2"),
(view! { <PictureInPicture/> }.into_any(), "Picture In Picture"),
(view! { <PiggyBank/> }.into_any(), "Piggy Bank"),
(view! { <PilcrowLeft/> }.into_any(), "Pilcrow Left"),
(view! { <PilcrowRight/> }.into_any(), "Pilcrow Right"),
(view! { <Pilcrow/> }.into_any(), "Pilcrow"),
(view! { <PillBottle/> }.into_any(), "Pill Bottle"),
(view! { <Pill/> }.into_any(), "Pill"),
(view! { <PinOff/> }.into_any(), "Pin Off"),
(view! { <Pin/> }.into_any(), "Pin"),
(view! { <Pipette/> }.into_any(), "Pipette"),
(view! { <Pizza/> }.into_any(), "Pizza"),
(view! { <PlaneLanding/> }.into_any(), "Plane Landing"),
(view! { <PlaneTakeoff/> }.into_any(), "Plane Takeoff"),
(view! { <Plane/> }.into_any(), "Plane"),
(view! { <Play/> }.into_any(), "Play"),
(view! { <Plug2/> }.into_any(), "Plug 2"),
(view! { <PlugZap/> }.into_any(), "Plug Zap"),
(view! { <Plug/> }.into_any(), "Plug"),
(view! { <Plus/> }.into_any(), "Plus"),
(view! { <PocketKnife/> }.into_any(), "Pocket Knife"),
(view! { <Pocket/> }.into_any(), "Pocket"),
(view! { <Podcast/> }.into_any(), "Podcast"),
(view! { <PointerOff/> }.into_any(), "Pointer Off"),
(view! { <Pointer/> }.into_any(), "Pointer"),
(view! { <Popcorn/> }.into_any(), "Popcorn"),
(view! { <Popsicle/> }.into_any(), "Popsicle"),
(view! { <PoundSterling/> }.into_any(), "Pound Sterling"),
(view! { <PowerOff/> }.into_any(), "Power Off"),
(view! { <Power/> }.into_any(), "Power"),
(view! { <Presentation/> }.into_any(), "Presentation"),
(view! { <PrinterCheck/> }.into_any(), "Printer Check"),
(view! { <Printer/> }.into_any(), "Printer"),
(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! { <RadioReceiver/> }.into_any(), "Radio Receiver"),
(view! { <RadioTower/> }.into_any(), "Radio Tower"),
(view! { <Radio/> }.into_any(), "Radio"),
(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! { <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! { <Receipt/> }.into_any(), "Receipt"),
(view! { <RectangleEllipsis/> }.into_any(), "Rectangle Ellipsis"),
(view! { <RectangleHorizontal/> }.into_any(), "Rectangle Horizontal"),
(view! { <RectangleVertical/> }.into_any(), "Rectangle Vertical"),
(view! { <Recycle/> }.into_any(), "Recycle"),
(view! { <Redo2/> }.into_any(), "Redo 2"),
(view! { <RedoDot/> }.into_any(), "Redo Dot"),
(view! { <Redo/> }.into_any(), "Redo"),
(view! { <RefreshCcwDot/> }.into_any(), "Refresh Ccw Dot"),
(view! { <RefreshCcw/> }.into_any(), "Refresh Ccw"),
(view! { <RefreshCwOff/> }.into_any(), "Refresh Cw Off"),
(view! { <RefreshCw/> }.into_any(), "Refresh Cw"),
(view! { <Refrigerator/> }.into_any(), "Refrigerator"),
(view! { <Regex/> }.into_any(), "Regex"),
(view! { <RemoveFormatting/> }.into_any(), "Remove Formatting"),
(view! { <Repeat1/> }.into_any(), "Repeat 1"),
(view! { <Repeat2/> }.into_any(), "Repeat 2"),
(view! { <Repeat/> }.into_any(), "Repeat"),
(view! { <ReplaceAll/> }.into_any(), "Replace All"),
(view! { <Replace/> }.into_any(), "Replace"),
(view! { <ReplyAll/> }.into_any(), "Reply All"),
(view! { <Reply/> }.into_any(), "Reply"),
(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! { <RotateCcwSquare/> }.into_any(), "Rotate Ccw Square"),
(view! { <RotateCcw/> }.into_any(), "Rotate Ccw"),
(view! { <RotateCwSquare/> }.into_any(), "Rotate Cw Square"),
(view! { <RotateCw/> }.into_any(), "Rotate Cw"),
(view! { <RouteOff/> }.into_any(), "Route Off"),
(view! { <Route/> }.into_any(), "Route"),
(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! { <SatelliteDish/> }.into_any(), "Satellite Dish"),
(view! { <Satellite/> }.into_any(), "Satellite"),
(view! { <SaveAll/> }.into_any(), "Save All"),
(view! { <SaveOff/> }.into_any(), "Save Off"),
(view! { <Save/> }.into_any(), "Save"),
(view! { <Scale3D/> }.into_any(), "Scale 3 D"),
(view! { <Scale/> }.into_any(), "Scale"),
(view! { <Scaling/> }.into_any(), "Scaling"),
(view! { <ScanBarcode/> }.into_any(), "Scan Barcode"),
(view! { <ScanEye/> }.into_any(), "Scan Eye"),
(view! { <ScanFace/> }.into_any(), "Scan Face"),
(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! { <Scan/> }.into_any(), "Scan"),
(view! { <School/> }.into_any(), "School"),
(view! { <ScissorsLineDashed/> }.into_any(), "Scissors Line Dashed"),
(view! { <Scissors/> }.into_any(), "Scissors"),
(view! { <ScreenShareOff/> }.into_any(), "Screen Share Off"),
(view! { <ScreenShare/> }.into_any(), "Screen Share"),
(view! { <ScrollText/> }.into_any(), "Scroll Text"),
(view! { <Scroll/> }.into_any(), "Scroll"),
(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! { <Search/> }.into_any(), "Search"),
(view! { <Section/> }.into_any(), "Section"),
(view! { <SendHorizontal/> }.into_any(), "Send Horizontal"),
(view! { <SendToBack/> }.into_any(), "Send To Back"),
(view! { <Send/> }.into_any(), "Send"),
(view! { <SeparatorHorizontal/> }.into_any(), "Separator Horizontal"),
(view! { <SeparatorVertical/> }.into_any(), "Separator Vertical"),
(view! { <ServerCog/> }.into_any(), "Server Cog"),
(view! { <ServerCrash/> }.into_any(), "Server Crash"),
(view! { <ServerOff/> }.into_any(), "Server Off"),
(view! { <Server/> }.into_any(), "Server"),
(view! { <Settings2/> }.into_any(), "Settings 2"),
(view! { <Settings/> }.into_any(), "Settings"),
(view! { <Shapes/> }.into_any(), "Shapes"),
(view! { <Share2/> }.into_any(), "Share 2"),
(view! { <Share/> }.into_any(), "Share"),
(view! { <Sheet/> }.into_any(), "Sheet"),
(view! { <Shell/> }.into_any(), "Shell"),
(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! { <Shield/> }.into_any(), "Shield"),
(view! { <ShipWheel/> }.into_any(), "Ship Wheel"),
(view! { <Ship/> }.into_any(), "Ship"),
(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! { <SignalHigh/> }.into_any(), "Signal High"),
(view! { <SignalLow/> }.into_any(), "Signal Low"),
(view! { <SignalMedium/> }.into_any(), "Signal Medium"),
(view! { <SignalZero/> }.into_any(), "Signal Zero"),
(view! { <Signal/> }.into_any(), "Signal"),
(view! { <Signature/> }.into_any(), "Signature"),
(view! { <SignpostBig/> }.into_any(), "Signpost Big"),
(view! { <Signpost/> }.into_any(), "Signpost"),
(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! { <SmartphoneCharging/> }.into_any(), "Smartphone Charging"),
(view! { <SmartphoneNfc/> }.into_any(), "Smartphone Nfc"),
(view! { <Smartphone/> }.into_any(), "Smartphone"),
(view! { <SmilePlus/> }.into_any(), "Smile Plus"),
(view! { <Smile/> }.into_any(), "Smile"),
(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! { <SpellCheck2/> }.into_any(), "Spell Check 2"),
(view! { <SpellCheck/> }.into_any(), "Spell Check"),
(view! { <Spline/> }.into_any(), "Spline"),
(view! { <Split/> }.into_any(), "Split"),
(view! { <SprayCan/> }.into_any(), "Spray Can"),
(view! { <Sprout/> }.into_any(), "Sprout"),
(view! { <SquareActivity/> }.into_any(), "Square Activity"),
(view! { <SquareArrowDownLeft/> }.into_any(), "Square Arrow Down Left"),
(view! { <SquareArrowDownRight/> }.into_any(), "Square Arrow Down Right"),
(view! { <SquareArrowDown/> }.into_any(), "Square Arrow Down"),
(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! { <SquareArrowUpLeft/> }.into_any(), "Square Arrow Up Left"),
(view! { <SquareArrowUpRight/> }.into_any(), "Square Arrow Up Right"),
(view! { <SquareArrowUp/> }.into_any(), "Square Arrow Up"),
(view! { <SquareAsterisk/> }.into_any(), "Square Asterisk"),
(
view! { <SquareBottomDashedScissors/> }.into_any(),
"Square Bottom Dashed Scissors",
),
(view! { <SquareChartGantt/> }.into_any(), "Square Chart Gantt"),
(view! { <SquareCheckBig/> }.into_any(), "Square Check Big"),
(view! { <SquareCheck/> }.into_any(), "Square Check"),
(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! { <SquareDashedBottomCode/> }.into_any(), "Square Dashed Bottom Code"),
(view! { <SquareDashedBottom/> }.into_any(), "Square Dashed Bottom"),
(view! { <SquareDashedKanban/> }.into_any(), "Square Dashed Kanban"),
(view! { <SquareDashedMousePointer/> }.into_any(), "Square Dashed Mouse Pointer"),
(view! { <SquareDashed/> }.into_any(), "Square Dashed"),
(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! { <SquareParkingOff/> }.into_any(), "Square Parking Off"),
(view! { <SquareParking/> }.into_any(), "Square Parking"),
(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! { <SquareUserRound/> }.into_any(), "Square User Round"),
(view! { <SquareUser/> }.into_any(), "Square User"),
(view! { <SquareX/> }.into_any(), "Square X"),
(view! { <Square/> }.into_any(), "Square"),
(view! { <Squircle/> }.into_any(), "Squircle"),
(view! { <Squirrel/> }.into_any(), "Squirrel"),
(view! { <Stamp/> }.into_any(), "Stamp"),
(view! { <StarHalf/> }.into_any(), "Star Half"),
(view! { <StarOff/> }.into_any(), "Star Off"),
(view! { <Star/> }.into_any(), "Star"),
(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! { <SunDim/> }.into_any(), "Sun Dim"),
(view! { <SunMedium/> }.into_any(), "Sun Medium"),
(view! { <SunMoon/> }.into_any(), "Sun Moon"),
(view! { <SunSnow/> }.into_any(), "Sun Snow"),
(view! { <Sun/> }.into_any(), "Sun"),
(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! { <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! { <Table/> }.into_any(), "Table"),
(view! { <TabletSmartphone/> }.into_any(), "Tablet Smartphone"),
(view! { <Tablet/> }.into_any(), "Tablet"),
(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! { <TentTree/> }.into_any(), "Tent Tree"),
(view! { <Tent/> }.into_any(), "Tent"),
(view! { <Terminal/> }.into_any(), "Terminal"),
(view! { <TestTubeDiagonal/> }.into_any(), "Test Tube Diagonal"),
(view! { <TestTube/> }.into_any(), "Test Tube"),
(view! { <TestTubes/> }.into_any(), "Test Tubes"),
(view! { <TextCursorInput/> }.into_any(), "Text Cursor Input"),
(view! { <TextCursor/> }.into_any(), "Text Cursor"),
(view! { <TextQuote/> }.into_any(), "Text Quote"),
(view! { <TextSearch/> }.into_any(), "Text Search"),
(view! { <TextSelect/> }.into_any(), "Text Select"),
(view! { <Text/> }.into_any(), "Text"),
(view! { <Theater/> }.into_any(), "Theater"),
(view! { <ThermometerSnowflake/> }.into_any(), "Thermometer Snowflake"),
(view! { <ThermometerSun/> }.into_any(), "Thermometer Sun"),
(view! { <Thermometer/> }.into_any(), "Thermometer"),
(view! { <ThumbsDown/> }.into_any(), "Thumbs Down"),
(view! { <ThumbsUp/> }.into_any(), "Thumbs Up"),
(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! { <Ticket/> }.into_any(), "Ticket"),
(view! { <TicketsPlane/> }.into_any(), "Tickets Plane"),
(view! { <Tickets/> }.into_any(), "Tickets"),
(view! { <TimerOff/> }.into_any(), "Timer Off"),
(view! { <TimerReset/> }.into_any(), "Timer Reset"),
(view! { <Timer/> }.into_any(), "Timer"),
(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! { <TouchpadOff/> }.into_any(), "Touchpad Off"),
(view! { <Touchpad/> }.into_any(), "Touchpad"),
(view! { <TowerControl/> }.into_any(), "Tower Control"),
(view! { <ToyBrick/> }.into_any(), "Toy Brick"),
(view! { <Tractor/> }.into_any(), "Tractor"),
(view! { <TrafficCone/> }.into_any(), "Traffic Cone"),
(view! { <TrainFrontTunnel/> }.into_any(), "Train Front Tunnel"),
(view! { <TrainFront/> }.into_any(), "Train Front"),
(view! { <TrainTrack/> }.into_any(), "Train Track"),
(view! { <TramFront/> }.into_any(), "Tram Front"),
(view! { <Trash2/> }.into_any(), "Trash 2"),
(view! { <Trash/> }.into_any(), "Trash"),
(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! { <TrendingUpDown/> }.into_any(), "Trending Up Down"),
(view! { <TrendingUp/> }.into_any(), "Trending Up"),
(view! { <TriangleAlert/> }.into_any(), "Triangle Alert"),
(view! { <TriangleRight/> }.into_any(), "Triangle Right"),
(view! { <Triangle/> }.into_any(), "Triangle"),
(view! { <Trophy/> }.into_any(), "Trophy"),
(view! { <Truck/> }.into_any(), "Truck"),
(view! { <Turtle/> }.into_any(), "Turtle"),
(view! { <TvMinimalPlay/> }.into_any(), "Tv Minimal Play"),
(view! { <TvMinimal/> }.into_any(), "Tv Minimal"),
(view! { <Tv/> }.into_any(), "Tv"),
(view! { <Twitch/> }.into_any(), "Twitch"),
(view! { <Twitter/> }.into_any(), "Twitter"),
(view! { <TypeOutline/> }.into_any(), "Type Outline"),
(view! { <Type/> }.into_any(), "Type"),
]
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! { <UmbrellaOff/> }.into_any(), "Umbrella Off"),
(view! { <Umbrella/> }.into_any(), "Umbrella"),
(view! { <Underline/> }.into_any(), "Underline"),
(view! { <Undo2/> }.into_any(), "Undo 2"),
(view! { <UndoDot/> }.into_any(), "Undo Dot"),
(view! { <Undo/> }.into_any(), "Undo"),
(view! { <UnfoldHorizontal/> }.into_any(), "Unfold Horizontal"),
(view! { <UnfoldVertical/> }.into_any(), "Unfold Vertical"),
(view! { <Ungroup/> }.into_any(), "Ungroup"),
(view! { <University/> }.into_any(), "University"),
(view! { <Unlink2/> }.into_any(), "Unlink 2"),
(view! { <Unlink/> }.into_any(), "Unlink"),
(view! { <Unplug/> }.into_any(), "Unplug"),
(view! { <Upload/> }.into_any(), "Upload"),
(view! { <Usb/> }.into_any(), "Usb"),
(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! { <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! { <UserRound/> }.into_any(), "User Round"),
(view! { <UserSearch/> }.into_any(), "User Search"),
(view! { <UserX/> }.into_any(), "User X"),
(view! { <User/> }.into_any(), "User"),
(view! { <UsersRound/> }.into_any(), "Users Round"),
(view! { <Users/> }.into_any(), "Users"),
(view! { <UtensilsCrossed/> }.into_any(), "Utensils Crossed"),
(view! { <Utensils/> }.into_any(), "Utensils"),
(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! { <VibrateOff/> }.into_any(), "Vibrate Off"),
(view! { <Vibrate/> }.into_any(), "Vibrate"),
(view! { <VideoOff/> }.into_any(), "Video Off"),
(view! { <Video/> }.into_any(), "Video"),
(view! { <Videotape/> }.into_any(), "Videotape"),
(view! { <View/> }.into_any(), "View"),
(view! { <Voicemail/> }.into_any(), "Voicemail"),
(view! { <Volleyball/> }.into_any(), "Volleyball"),
(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! { <Volume/> }.into_any(), "Volume"),
(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! { <WalletCards/> }.into_any(), "Wallet Cards"),
(view! { <WalletMinimal/> }.into_any(), "Wallet Minimal"),
(view! { <Wallet/> }.into_any(), "Wallet"),
(view! { <Wallpaper/> }.into_any(), "Wallpaper"),
(view! { <WandSparkles/> }.into_any(), "Wand Sparkles"),
(view! { <Wand/> }.into_any(), "Wand"),
(view! { <Warehouse/> }.into_any(), "Warehouse"),
(view! { <WashingMachine/> }.into_any(), "Washing Machine"),
(view! { <Watch/> }.into_any(), "Watch"),
(view! { <Waves/> }.into_any(), "Waves"),
(view! { <Waypoints/> }.into_any(), "Waypoints"),
(view! { <Webcam/> }.into_any(), "Webcam"),
(view! { <WebhookOff/> }.into_any(), "Webhook Off"),
(view! { <Webhook/> }.into_any(), "Webhook"),
(view! { <Weight/> }.into_any(), "Weight"),
(view! { <WheatOff/> }.into_any(), "Wheat Off"),
(view! { <Wheat/> }.into_any(), "Wheat"),
(view! { <WholeWord/> }.into_any(), "Whole Word"),
(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! { <Wifi/> }.into_any(), "Wifi"),
(view! { <WindArrowDown/> }.into_any(), "Wind Arrow Down"),
(view! { <Wind/> }.into_any(), "Wind"),
(view! { <WineOff/> }.into_any(), "Wine Off"),
(view! { <Wine/> }.into_any(), "Wine"),
(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! { <ZapOff/> }.into_any(), "Zap Off"),
(view! { <Zap/> }.into_any(), "Zap"),
(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! { <AlarmClockCheck /> }, "Alarm Clock Check"),
(html! { <AlarmClockMinus /> }, "Alarm Clock Minus"),
(html! { <AlarmClockOff /> }, "Alarm Clock Off"),
(html! { <AlarmClockPlus /> }, "Alarm Clock Plus"),
(html! { <AlarmClock /> }, "Alarm Clock"),
(html! { <AlarmSmoke /> }, "Alarm Smoke"),
(html! { <Album /> }, "Album"),
(
html! { <AlignCenterHorizontal /> },
"Align Center Horizontal",
),
(html! { <AlignCenterVertical /> }, "Align Center Vertical"),
(html! { <AlignCenter /> }, "Align Center"),
(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! { <AppWindowMac /> }, "App Window Mac"),
(html! { <AppWindow /> }, "App Window"),
(html! { <Apple /> }, "Apple"),
(html! { <ArchiveRestore /> }, "Archive Restore"),
(html! { <ArchiveX /> }, "Archive X"),
(html! { <Archive /> }, "Archive"),
(html! { <Armchair /> }, "Armchair"),
(html! { <ArrowBigDownDash /> }, "Arrow Big Down Dash"),
(html! { <ArrowBigDown /> }, "Arrow Big Down"),
(html! { <ArrowBigLeftDash /> }, "Arrow Big Left Dash"),
(html! { <ArrowBigLeft /> }, "Arrow Big Left"),
(html! { <ArrowBigRightDash /> }, "Arrow Big Right Dash"),
(html! { <ArrowBigRight /> }, "Arrow Big Right"),
(html! { <ArrowBigUpDash /> }, "Arrow Big Up Dash"),
(html! { <ArrowBigUp /> }, "Arrow Big Up"),
(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! { <ArrowDown /> }, "Arrow Down"),
(html! { <ArrowLeftFromLine /> }, "Arrow Left From Line"),
(html! { <ArrowLeftRight /> }, "Arrow Left Right"),
(html! { <ArrowLeftToLine /> }, "Arrow Left To Line"),
(html! { <ArrowLeft /> }, "Arrow Left"),
(html! { <ArrowRightFromLine /> }, "Arrow Right From Line"),
(html! { <ArrowRightLeft /> }, "Arrow Right Left"),
(html! { <ArrowRightToLine /> }, "Arrow Right To Line"),
(html! { <ArrowRight /> }, "Arrow Right"),
(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! { <ArrowUp /> }, "Arrow Up"),
(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! { <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! { <Badge /> }, "Badge"),
(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! { <BatteryCharging /> }, "Battery Charging"),
(html! { <BatteryFull /> }, "Battery Full"),
(html! { <BatteryLow /> }, "Battery Low"),
(html! { <BatteryMedium /> }, "Battery Medium"),
(html! { <BatteryWarning /> }, "Battery Warning"),
(html! { <Battery /> }, "Battery"),
(html! { <Beaker /> }, "Beaker"),
(html! { <BeanOff /> }, "Bean Off"),
(html! { <Bean /> }, "Bean"),
(html! { <BedDouble /> }, "Bed Double"),
(html! { <BedSingle /> }, "Bed Single"),
(html! { <Bed /> }, "Bed"),
(html! { <Beef /> }, "Beef"),
(html! { <BeerOff /> }, "Beer Off"),
(html! { <Beer /> }, "Beer"),
(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! { <Bell /> }, "Bell"),
(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! { <BluetoothConnected /> }, "Bluetooth Connected"),
(html! { <BluetoothOff /> }, "Bluetooth Off"),
(html! { <BluetoothSearching /> }, "Bluetooth Searching"),
(html! { <Bluetooth /> }, "Bluetooth"),
(html! { <Bold /> }, "Bold"),
(html! { <Bolt /> }, "Bolt"),
(html! { <Bomb /> }, "Bomb"),
(html! { <Bone /> }, "Bone"),
(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! { <BookOpenCheck /> }, "Book Open Check"),
(html! { <BookOpenText /> }, "Book Open Text"),
(html! { <BookOpen /> }, "Book Open"),
(html! { <BookPlus /> }, "Book Plus"),
(html! { <BookText /> }, "Book Text"),
(html! { <BookType /> }, "Book Type"),
(html! { <BookUp2 /> }, "Book Up 2"),
(html! { <BookUp /> }, "Book Up"),
(html! { <BookUser /> }, "Book User"),
(html! { <BookX /> }, "Book X"),
(html! { <Book /> }, "Book"),
(html! { <BookmarkCheck /> }, "Bookmark Check"),
(html! { <BookmarkMinus /> }, "Bookmark Minus"),
(html! { <BookmarkPlus /> }, "Bookmark Plus"),
(html! { <BookmarkX /> }, "Bookmark X"),
(html! { <Bookmark /> }, "Bookmark"),
(html! { <BoomBox /> }, "Boom Box"),
(html! { <BotMessageSquare /> }, "Bot Message Square"),
(html! { <BotOff /> }, "Bot Off"),
(html! { <Bot /> }, "Bot"),
(html! { <Box /> }, "Box"),
(html! { <Boxes /> }, "Boxes"),
(html! { <Braces /> }, "Braces"),
(html! { <Brackets /> }, "Brackets"),
(html! { <BrainCircuit /> }, "Brain Circuit"),
(html! { <BrainCog /> }, "Brain Cog"),
(html! { <Brain /> }, "Brain"),
(html! { <BrickWall /> }, "Brick Wall"),
(html! { <BriefcaseBusiness /> }, "Briefcase Business"),
(
html! { <BriefcaseConveyorBelt /> },
"Briefcase Conveyor Belt",
),
(html! { <BriefcaseMedical /> }, "Briefcase Medical"),
(html! { <Briefcase /> }, "Briefcase"),
(html! { <BringToFront /> }, "Bring To Front"),
(html! { <Brush /> }, "Brush"),
(html! { <BugOff /> }, "Bug Off"),
(html! { <BugPlay /> }, "Bug Play"),
(html! { <Bug /> }, "Bug"),
(html! { <Building2 /> }, "Building 2"),
(html! { <Building /> }, "Building"),
(html! { <BusFront /> }, "Bus Front"),
(html! { <Bus /> }, "Bus"),
];
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! { <CableCar /> }, "Cable Car"),
(html! { <Cable /> }, "Cable"),
(html! { <CakeSlice /> }, "Cake Slice"),
(html! { <Cake /> }, "Cake"),
(html! { <Calculator /> }, "Calculator"),
(html! { <Calendar1 /> }, "Calendar 1"),
(html! { <CalendarArrowDown /> }, "Calendar Arrow Down"),
(html! { <CalendarArrowUp /> }, "Calendar Arrow Up"),
(html! { <CalendarCheck2 /> }, "Calendar Check 2"),
(html! { <CalendarCheck /> }, "Calendar Check"),
(html! { <CalendarClock /> }, "Calendar Clock"),
(html! { <CalendarCog /> }, "Calendar Cog"),
(html! { <CalendarDays /> }, "Calendar Days"),
(html! { <CalendarFold /> }, "Calendar Fold"),
(html! { <CalendarHeart /> }, "Calendar Heart"),
(html! { <CalendarMinus2 /> }, "Calendar Minus 2"),
(html! { <CalendarMinus /> }, "Calendar Minus"),
(html! { <CalendarOff /> }, "Calendar Off"),
(html! { <CalendarPlus2 /> }, "Calendar Plus 2"),
(html! { <CalendarPlus /> }, "Calendar Plus"),
(html! { <CalendarRange /> }, "Calendar Range"),
(html! { <CalendarSearch /> }, "Calendar Search"),
(html! { <CalendarX2 /> }, "Calendar X 2"),
(html! { <CalendarX /> }, "Calendar X"),
(html! { <Calendar /> }, "Calendar"),
(html! { <CameraOff /> }, "Camera Off"),
(html! { <Camera /> }, "Camera"),
(html! { <CandyCane /> }, "Candy Cane"),
(html! { <CandyOff /> }, "Candy Off"),
(html! { <Candy /> }, "Candy"),
(html! { <Cannabis /> }, "Cannabis"),
(html! { <CaptionsOff /> }, "Captions Off"),
(html! { <Captions /> }, "Captions"),
(html! { <CarFront /> }, "Car Front"),
(html! { <CarTaxiFront /> }, "Car Taxi Front"),
(html! { <Car /> }, "Car"),
(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! { <ChartBarBig /> }, "Chart Bar Big"),
(html! { <ChartBarDecreasing /> }, "Chart Bar Decreasing"),
(html! { <ChartBarIncreasing /> }, "Chart Bar Increasing"),
(html! { <ChartBarStacked /> }, "Chart Bar Stacked"),
(html! { <ChartBar /> }, "Chart Bar"),
(html! { <ChartCandlestick /> }, "Chart Candlestick"),
(html! { <ChartColumnBig /> }, "Chart Column Big"),
(
html! { <ChartColumnDecreasing /> },
"Chart Column Decreasing",
),
(
html! { <ChartColumnIncreasing /> },
"Chart Column Increasing",
),
(html! { <ChartColumnStacked /> }, "Chart Column Stacked"),
(html! { <ChartColumn /> }, "Chart Column"),
(html! { <ChartGantt /> }, "Chart Gantt"),
(html! { <ChartLine /> }, "Chart Line"),
(html! { <ChartNetwork /> }, "Chart Network"),
(
html! { <ChartNoAxesColumnDecreasing /> },
"Chart No Axes Column Decreasing",
),
(
html! { <ChartNoAxesColumnIncreasing /> },
"Chart No Axes Column Increasing",
),
(html! { <ChartNoAxesColumn /> }, "Chart No Axes Column"),
(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! { <CheckCheck /> }, "Check Check"),
(html! { <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! { <ChevronsDownUp /> }, "Chevrons Down Up"),
(html! { <ChevronsDown /> }, "Chevrons Down"),
(
html! { <ChevronsLeftRightEllipsis /> },
"Chevrons Left Right Ellipsis",
),
(html! { <ChevronsLeftRight /> }, "Chevrons Left Right"),
(html! { <ChevronsLeft /> }, "Chevrons Left"),
(html! { <ChevronsRightLeft /> }, "Chevrons Right Left"),
(html! { <ChevronsRight /> }, "Chevrons Right"),
(html! { <ChevronsUpDown /> }, "Chevrons Up Down"),
(html! { <ChevronsUp /> }, "Chevrons Up"),
(html! { <Chrome /> }, "Chrome"),
(html! { <Church /> }, "Church"),
(html! { <CigaretteOff /> }, "Cigarette Off"),
(html! { <Cigarette /> }, "Cigarette"),
(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! { <CircleCheckBig /> }, "Circle Check Big"),
(html! { <CircleCheck /> }, "Circle Check"),
(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! { <CircleDotDashed /> }, "Circle Dot Dashed"),
(html! { <CircleDot /> }, "Circle Dot"),
(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! { <CircleParkingOff /> }, "Circle Parking Off"),
(html! { <CircleParking /> }, "Circle Parking"),
(html! { <CirclePause /> }, "Circle Pause"),
(html! { <CirclePercent /> }, "Circle Percent"),
(html! { <CirclePlay /> }, "Circle Play"),
(html! { <CirclePlus /> }, "Circle Plus"),
(html! { <CirclePower /> }, "Circle Power"),
(html! { <CircleSlash2 /> }, "Circle Slash 2"),
(html! { <CircleSlash /> }, "Circle Slash"),
(html! { <CircleStop /> }, "Circle Stop"),
(html! { <CircleUserRound /> }, "Circle User Round"),
(html! { <CircleUser /> }, "Circle User"),
(html! { <CircleX /> }, "Circle X"),
(html! { <Circle /> }, "Circle"),
(html! { <CircuitBoard /> }, "Circuit Board"),
(html! { <Citrus /> }, "Citrus"),
(html! { <Clapperboard /> }, "Clapperboard"),
(html! { <ClipboardCheck /> }, "Clipboard Check"),
(html! { <ClipboardCopy /> }, "Clipboard Copy"),
(html! { <ClipboardList /> }, "Clipboard List"),
(html! { <ClipboardMinus /> }, "Clipboard Minus"),
(html! { <ClipboardPaste /> }, "Clipboard Paste"),
(html! { <ClipboardPenLine /> }, "Clipboard Pen Line"),
(html! { <ClipboardPen /> }, "Clipboard Pen"),
(html! { <ClipboardPlus /> }, "Clipboard Plus"),
(html! { <ClipboardType /> }, "Clipboard Type"),
(html! { <ClipboardX /> }, "Clipboard X"),
(html! { <Clipboard /> }, "Clipboard"),
(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! { <Clock /> }, "Clock"),
(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! { <CloudMoonRain /> }, "Cloud Moon Rain"),
(html! { <CloudMoon /> }, "Cloud Moon"),
(html! { <CloudOff /> }, "Cloud Off"),
(html! { <CloudRainWind /> }, "Cloud Rain Wind"),
(html! { <CloudRain /> }, "Cloud Rain"),
(html! { <CloudSnow /> }, "Cloud Snow"),
(html! { <CloudSunRain /> }, "Cloud Sun Rain"),
(html! { <CloudSun /> }, "Cloud Sun"),
(html! { <CloudUpload /> }, "Cloud Upload"),
(html! { <Cloud /> }, "Cloud"),
(html! { <Cloudy /> }, "Cloudy"),
(html! { <Clover /> }, "Clover"),
(html! { <Club /> }, "Club"),
(html! { <CodeXml /> }, "Code Xml"),
(html! { <Code /> }, "Code"),
(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! { <ContactRound /> }, "Contact Round"),
(html! { <Contact /> }, "Contact"),
(html! { <Container /> }, "Container"),
(html! { <Contrast /> }, "Contrast"),
(html! { <Cookie /> }, "Cookie"),
(html! { <CookingPot /> }, "Cooking Pot"),
(html! { <CopyCheck /> }, "Copy Check"),
(html! { <CopyMinus /> }, "Copy Minus"),
(html! { <CopyPlus /> }, "Copy Plus"),
(html! { <CopySlash /> }, "Copy Slash"),
(html! { <CopyX /> }, "Copy X"),
(html! { <Copy /> }, "Copy"),
(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! { <DatabaseBackup /> }, "Database Backup"),
(html! { <DatabaseZap /> }, "Database Zap"),
(html! { <Database /> }, "Database"),
(html! { <Delete /> }, "Delete"),
(html! { <Dessert /> }, "Dessert"),
(html! { <Diameter /> }, "Diameter"),
(html! { <DiamondMinus /> }, "Diamond Minus"),
(html! { <DiamondPercent /> }, "Diamond Percent"),
(html! { <DiamondPlus /> }, "Diamond Plus"),
(html! { <Diamond /> }, "Diamond"),
(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! { <Disc2 /> }, "Disc 2"),
(html! { <Disc3 /> }, "Disc 3"),
(html! { <DiscAlbum /> }, "Disc Album"),
(html! { <Disc /> }, "Disc"),
(html! { <Divide /> }, "Divide"),
(html! { <DnaOff /> }, "Dna Off"),
(html! { <Dna /> }, "Dna"),
(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! { <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! { <EarOff /> }, "Ear Off"),
(html! { <Ear /> }, "Ear"),
(html! { <EarthLock /> }, "Earth Lock"),
(html! { <Earth /> }, "Earth"),
(html! { <Eclipse /> }, "Eclipse"),
(html! { <EggFried /> }, "Egg Fried"),
(html! { <EggOff /> }, "Egg Off"),
(html! { <Egg /> }, "Egg"),
(html! { <EllipsisVertical /> }, "Ellipsis Vertical"),
(html! { <Ellipsis /> }, "Ellipsis"),
(html! { <EqualApproximately /> }, "Equal Approximately"),
(html! { <EqualNot /> }, "Equal Not"),
(html! { <Equal /> }, "Equal"),
(html! { <Eraser /> }, "Eraser"),
(html! { <EthernetPort /> }, "Ethernet Port"),
(html! { <Euro /> }, "Euro"),
(html! { <Expand /> }, "Expand"),
(html! { <ExternalLink /> }, "External Link"),
(html! { <EyeClosed /> }, "Eye Closed"),
(html! { <EyeOff /> }, "Eye Off"),
(html! { <Eye /> }, "Eye"),
];
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! { <FileArchive /> }, "File Archive"),
(html! { <FileAudio2 /> }, "File Audio 2"),
(html! { <FileAudio /> }, "File Audio"),
(html! { <FileAxis3D /> }, "File Axis 3 D"),
(html! { <FileBadge2 /> }, "File Badge 2"),
(html! { <FileBadge /> }, "File Badge"),
(html! { <FileBox /> }, "File Box"),
(
html! { <FileChartColumnIncreasing /> },
"File Chart Column Increasing",
),
(html! { <FileChartColumn /> }, "File Chart Column"),
(html! { <FileChartLine /> }, "File Chart Line"),
(html! { <FileChartPie /> }, "File Chart Pie"),
(html! { <FileCheck2 /> }, "File Check 2"),
(html! { <FileCheck /> }, "File Check"),
(html! { <FileClock /> }, "File Clock"),
(html! { <FileCode2 /> }, "File Code 2"),
(html! { <FileCode /> }, "File Code"),
(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! { <FileJson2 /> }, "File Json 2"),
(html! { <FileJson /> }, "File Json"),
(html! { <FileKey2 /> }, "File Key 2"),
(html! { <FileKey /> }, "File Key"),
(html! { <FileLock2 /> }, "File Lock 2"),
(html! { <FileLock /> }, "File Lock"),
(html! { <FileMinus2 /> }, "File Minus 2"),
(html! { <FileMinus /> }, "File Minus"),
(html! { <FileMusic /> }, "File Music"),
(html! { <FileOutput /> }, "File Output"),
(html! { <FilePenLine /> }, "File Pen Line"),
(html! { <FilePen /> }, "File Pen"),
(html! { <FilePlus2 /> }, "File Plus 2"),
(html! { <FilePlus /> }, "File Plus"),
(html! { <FileQuestion /> }, "File Question"),
(html! { <FileScan /> }, "File Scan"),
(html! { <FileSearch2 /> }, "File Search 2"),
(html! { <FileSearch /> }, "File Search"),
(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! { <FileType2 /> }, "File Type 2"),
(html! { <FileType /> }, "File Type"),
(html! { <FileUp /> }, "File Up"),
(html! { <FileUser /> }, "File User"),
(html! { <FileVideo2 /> }, "File Video 2"),
(html! { <FileVideo /> }, "File Video"),
(html! { <FileVolume2 /> }, "File Volume 2"),
(html! { <FileVolume /> }, "File Volume"),
(html! { <FileWarning /> }, "File Warning"),
(html! { <FileX2 /> }, "File X 2"),
(html! { <FileX /> }, "File X"),
(html! { <File /> }, "File"),
(html! { <Files /> }, "Files"),
(html! { <Film /> }, "Film"),
(html! { <FilterX /> }, "Filter X"),
(html! { <Filter /> }, "Filter"),
(html! { <Fingerprint /> }, "Fingerprint"),
(html! { <FireExtinguisher /> }, "Fire Extinguisher"),
(html! { <FishOff /> }, "Fish Off"),
(html! { <FishSymbol /> }, "Fish Symbol"),
(html! { <Fish /> }, "Fish"),
(html! { <FlagOff /> }, "Flag Off"),
(html! { <FlagTriangleLeft /> }, "Flag Triangle Left"),
(html! { <FlagTriangleRight /> }, "Flag Triangle Right"),
(html! { <Flag /> }, "Flag"),
(html! { <FlameKindling /> }, "Flame Kindling"),
(html! { <Flame /> }, "Flame"),
(html! { <FlashlightOff /> }, "Flashlight Off"),
(html! { <Flashlight /> }, "Flashlight"),
(html! { <FlaskConicalOff /> }, "Flask Conical Off"),
(html! { <FlaskConical /> }, "Flask Conical"),
(html! { <FlaskRound /> }, "Flask Round"),
(html! { <FlipHorizontal2 /> }, "Flip Horizontal 2"),
(html! { <FlipHorizontal /> }, "Flip Horizontal"),
(html! { <FlipVertical2 /> }, "Flip Vertical 2"),
(html! { <FlipVertical /> }, "Flip Vertical"),
(html! { <Flower2 /> }, "Flower 2"),
(html! { <Flower /> }, "Flower"),
(html! { <Focus /> }, "Focus"),
(html! { <FoldHorizontal /> }, "Fold Horizontal"),
(html! { <FoldVertical /> }, "Fold Vertical"),
(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! { <FolderGit2 /> }, "Folder Git 2"),
(html! { <FolderGit /> }, "Folder Git"),
(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! { <FolderOpenDot /> }, "Folder Open Dot"),
(html! { <FolderOpen /> }, "Folder Open"),
(html! { <FolderOutput /> }, "Folder Output"),
(html! { <FolderPen /> }, "Folder Pen"),
(html! { <FolderPlus /> }, "Folder Plus"),
(html! { <FolderRoot /> }, "Folder Root"),
(html! { <FolderSearch2 /> }, "Folder Search 2"),
(html! { <FolderSearch /> }, "Folder Search"),
(html! { <FolderSymlink /> }, "Folder Symlink"),
(html! { <FolderSync /> }, "Folder Sync"),
(html! { <FolderTree /> }, "Folder Tree"),
(html! { <FolderUp /> }, "Folder Up"),
(html! { <FolderX /> }, "Folder X"),
(html! { <Folder /> }, "Folder"),
(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! { <GalleryHorizontalEnd /> }, "Gallery Horizontal End"),
(html! { <GalleryHorizontal /> }, "Gallery Horizontal"),
(html! { <GalleryThumbnails /> }, "Gallery Thumbnails"),
(html! { <GalleryVerticalEnd /> }, "Gallery Vertical End"),
(html! { <GalleryVertical /> }, "Gallery Vertical"),
(html! { <Gamepad2 /> }, "Gamepad 2"),
(html! { <Gamepad /> }, "Gamepad"),
(html! { <Gauge /> }, "Gauge"),
(html! { <Gavel /> }, "Gavel"),
(html! { <Gem /> }, "Gem"),
(html! { <Ghost /> }, "Ghost"),
(html! { <Gift /> }, "Gift"),
(html! { <GitBranchPlus /> }, "Git Branch Plus"),
(html! { <GitBranch /> }, "Git Branch"),
(html! { <GitCommitHorizontal /> }, "Git Commit Horizontal"),
(html! { <GitCommitVertical /> }, "Git Commit Vertical"),
(html! { <GitCompareArrows /> }, "Git Compare Arrows"),
(html! { <GitCompare /> }, "Git Compare"),
(html! { <GitFork /> }, "Git Fork"),
(html! { <GitGraph /> }, "Git Graph"),
(html! { <GitMerge /> }, "Git Merge"),
(html! { <GitPullRequestArrow /> }, "Git Pull Request Arrow"),
(
html! { <GitPullRequestClosed /> },
"Git Pull Request Closed",
),
(
html! { <GitPullRequestCreateArrow /> },
"Git Pull Request Create Arrow",
),
(
html! { <GitPullRequestCreate /> },
"Git Pull Request Create",
),
(html! { <GitPullRequestDraft /> }, "Git Pull Request Draft"),
(html! { <GitPullRequest /> }, "Git Pull Request"),
(html! { <Github /> }, "Github"),
(html! { <Gitlab /> }, "Gitlab"),
(html! { <GlassWater /> }, "Glass Water"),
(html! { <Glasses /> }, "Glasses"),
(html! { <GlobeLock /> }, "Globe Lock"),
(html! { <Globe /> }, "Globe"),
(html! { <Goal /> }, "Goal"),
(html! { <Grab /> }, "Grab"),
(html! { <GraduationCap /> }, "Graduation Cap"),
(html! { <Grape /> }, "Grape"),
(html! { <Grid2X2Check /> }, "Grid 2 X 2 Check"),
(html! { <Grid2X2Plus /> }, "Grid 2 X 2 Plus"),
(html! { <Grid2X2X /> }, "Grid 2 X 2 X"),
(html! { <Grid2X2 /> }, "Grid 2 X 2"),
(html! { <Grid3X3 /> }, "Grid 3 X 3"),
(html! { <GripHorizontal /> }, "Grip Horizontal"),
(html! { <GripVertical /> }, "Grip Vertical"),
(html! { <Grip /> }, "Grip"),
(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! { <HandCoins /> }, "Hand Coins"),
(html! { <HandHeart /> }, "Hand Heart"),
(html! { <HandHelping /> }, "Hand Helping"),
(html! { <HandMetal /> }, "Hand Metal"),
(html! { <HandPlatter /> }, "Hand Platter"),
(html! { <Hand /> }, "Hand"),
(html! { <Handshake /> }, "Handshake"),
(html! { <HardDriveDownload /> }, "Hard Drive Download"),
(html! { <HardDriveUpload /> }, "Hard Drive Upload"),
(html! { <HardDrive /> }, "Hard Drive"),
(html! { <HardHat /> }, "Hard Hat"),
(html! { <Hash /> }, "Hash"),
(html! { <Haze /> }, "Haze"),
(html! { <HdmiPort /> }, "Hdmi Port"),
(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! { <Heading /> }, "Heading"),
(html! { <HeadphoneOff /> }, "Headphone Off"),
(html! { <Headphones /> }, "Headphones"),
(html! { <Headset /> }, "Headset"),
(html! { <HeartCrack /> }, "Heart Crack"),
(html! { <HeartHandshake /> }, "Heart Handshake"),
(html! { <HeartOff /> }, "Heart Off"),
(html! { <HeartPulse /> }, "Heart Pulse"),
(html! { <Heart /> }, "Heart"),
(html! { <Heater /> }, "Heater"),
(html! { <Hexagon /> }, "Hexagon"),
(html! { <Highlighter /> }, "Highlighter"),
(html! { <History /> }, "History"),
(html! { <HopOff /> }, "Hop Off"),
(html! { <Hop /> }, "Hop"),
(html! { <Hospital /> }, "Hospital"),
(html! { <Hotel /> }, "Hotel"),
(html! { <Hourglass /> }, "Hourglass"),
(html! { <HousePlug /> }, "House Plug"),
(html! { <HousePlus /> }, "House Plus"),
(html! { <House /> }, "House"),
];
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! { <ImageDown /> }, "Image Down"),
(html! { <ImageMinus /> }, "Image Minus"),
(html! { <ImageOff /> }, "Image Off"),
(html! { <ImagePlay /> }, "Image Play"),
(html! { <ImagePlus /> }, "Image Plus"),
(html! { <ImageUp /> }, "Image Up"),
(html! { <Image /> }, "Image"),
(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! { <KeyRound /> }, "Key Round"),
(html! { <KeySquare /> }, "Key Square"),
(html! { <Key /> }, "Key"),
(html! { <KeyboardMusic /> }, "Keyboard Music"),
(html! { <KeyboardOff /> }, "Keyboard Off"),
(html! { <Keyboard /> }, "Keyboard"),
];
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! { <LampCeiling /> }, "Lamp Ceiling"),
(html! { <LampDesk /> }, "Lamp Desk"),
(html! { <LampFloor /> }, "Lamp Floor"),
(html! { <LampWallDown /> }, "Lamp Wall Down"),
(html! { <LampWallUp /> }, "Lamp Wall Up"),
(html! { <Lamp /> }, "Lamp"),
(html! { <LandPlot /> }, "Land Plot"),
(html! { <Landmark /> }, "Landmark"),
(html! { <Languages /> }, "Languages"),
(html! { <LaptopMinimalCheck /> }, "Laptop Minimal Check"),
(html! { <LaptopMinimal /> }, "Laptop Minimal"),
(html! { <Laptop /> }, "Laptop"),
(html! { <LassoSelect /> }, "Lasso Select"),
(html! { <Lasso /> }, "Lasso"),
(html! { <Laugh /> }, "Laugh"),
(html! { <Layers2 /> }, "Layers 2"),
(html! { <Layers3 /> }, "Layers 3"),
(html! { <Layers /> }, "Layers"),
(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! { <LibraryBig /> }, "Library Big"),
(html! { <Library /> }, "Library"),
(html! { <LifeBuoy /> }, "Life Buoy"),
(html! { <Ligature /> }, "Ligature"),
(html! { <LightbulbOff /> }, "Lightbulb Off"),
(html! { <Lightbulb /> }, "Lightbulb"),
(html! { <Link2Off /> }, "Link 2 Off"),
(html! { <Link2 /> }, "Link 2"),
(html! { <Link /> }, "Link"),
(html! { <Linkedin /> }, "Linkedin"),
(html! { <ListCheck /> }, "List Check"),
(html! { <ListChecks /> }, "List Checks"),
(html! { <ListCollapse /> }, "List Collapse"),
(html! { <ListEnd /> }, "List End"),
(html! { <ListFilter /> }, "List Filter"),
(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! { <List /> }, "List"),
(html! { <LoaderCircle /> }, "Loader Circle"),
(html! { <LoaderPinwheel /> }, "Loader Pinwheel"),
(html! { <Loader /> }, "Loader"),
(html! { <LocateFixed /> }, "Locate Fixed"),
(html! { <LocateOff /> }, "Locate Off"),
(html! { <Locate /> }, "Locate"),
(html! { <LockKeyholeOpen /> }, "Lock Keyhole Open"),
(html! { <LockKeyhole /> }, "Lock Keyhole"),
(html! { <LockOpen /> }, "Lock Open"),
(html! { <Lock /> }, "Lock"),
(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! { <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! { <Mail /> }, "Mail"),
(html! { <Mailbox /> }, "Mailbox"),
(html! { <Mails /> }, "Mails"),
(html! { <MapPinCheckInside /> }, "Map Pin Check Inside"),
(html! { <MapPinCheck /> }, "Map Pin Check"),
(html! { <MapPinHouse /> }, "Map Pin House"),
(html! { <MapPinMinusInside /> }, "Map Pin Minus Inside"),
(html! { <MapPinMinus /> }, "Map Pin Minus"),
(html! { <MapPinOff /> }, "Map Pin Off"),
(html! { <MapPinPlusInside /> }, "Map Pin Plus Inside"),
(html! { <MapPinPlus /> }, "Map Pin Plus"),
(html! { <MapPinXInside /> }, "Map Pin X Inside"),
(html! { <MapPinX /> }, "Map Pin X"),
(html! { <MapPin /> }, "Map Pin"),
(html! { <MapPinned /> }, "Map Pinned"),
(html! { <Map /> }, "Map"),
(html! { <Martini /> }, "Martini"),
(html! { <Maximize2 /> }, "Maximize 2"),
(html! { <Maximize /> }, "Maximize"),
(html! { <Medal /> }, "Medal"),
(html! { <MegaphoneOff /> }, "Megaphone Off"),
(html! { <Megaphone /> }, "Megaphone"),
(html! { <Meh /> }, "Meh"),
(html! { <MemoryStick /> }, "Memory Stick"),
(html! { <Menu /> }, "Menu"),
(html! { <Merge /> }, "Merge"),
(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! { <MessageCircle /> }, "Message Circle"),
(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! { <MessageSquare /> }, "Message Square"),
(html! { <MessagesSquare /> }, "Messages Square"),
(html! { <MicOff /> }, "Mic Off"),
(html! { <MicVocal /> }, "Mic Vocal"),
(html! { <Mic /> }, "Mic"),
(html! { <Microchip /> }, "Microchip"),
(html! { <Microscope /> }, "Microscope"),
(html! { <Microwave /> }, "Microwave"),
(html! { <Milestone /> }, "Milestone"),
(html! { <MilkOff /> }, "Milk Off"),
(html! { <Milk /> }, "Milk"),
(html! { <Minimize2 /> }, "Minimize 2"),
(html! { <Minimize /> }, "Minimize"),
(html! { <Minus /> }, "Minus"),
(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! { <Monitor /> }, "Monitor"),
(html! { <MoonStar /> }, "Moon Star"),
(html! { <Moon /> }, "Moon"),
(html! { <MountainSnow /> }, "Mountain Snow"),
(html! { <Mountain /> }, "Mountain"),
(html! { <MouseOff /> }, "Mouse Off"),
(html! { <MousePointer2 /> }, "Mouse Pointer 2"),
(html! { <MousePointerBan /> }, "Mouse Pointer Ban"),
(html! { <MousePointerClick /> }, "Mouse Pointer Click"),
(html! { <MousePointer /> }, "Mouse Pointer"),
(html! { <Mouse /> }, "Mouse"),
(html! { <Move3D /> }, "Move 3 D"),
(html! { <MoveDiagonal2 /> }, "Move Diagonal 2"),
(html! { <MoveDiagonal /> }, "Move Diagonal"),
(html! { <MoveDownLeft /> }, "Move Down Left"),
(html! { <MoveDownRight /> }, "Move Down Right"),
(html! { <MoveDown /> }, "Move Down"),
(html! { <MoveHorizontal /> }, "Move Horizontal"),
(html! { <MoveLeft /> }, "Move Left"),
(html! { <MoveRight /> }, "Move Right"),
(html! { <MoveUpLeft /> }, "Move Up Left"),
(html! { <MoveUpRight /> }, "Move Up Right"),
(html! { <MoveUp /> }, "Move Up"),
(html! { <MoveVertical /> }, "Move Vertical"),
(html! { <Move /> }, "Move"),
(html! { <Music2 /> }, "Music 2"),
(html! { <Music3 /> }, "Music 3"),
(html! { <Music4 /> }, "Music 4"),
(html! { <Music /> }, "Music"),
];
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! { <Navigation2Off /> }, "Navigation 2 Off"),
(html! { <Navigation2 /> }, "Navigation 2"),
(html! { <NavigationOff /> }, "Navigation Off"),
(html! { <Navigation /> }, "Navigation"),
(html! { <Network /> }, "Network"),
(html! { <Newspaper /> }, "Newspaper"),
(html! { <Nfc /> }, "Nfc"),
(html! { <NotebookPen /> }, "Notebook Pen"),
(html! { <NotebookTabs /> }, "Notebook Tabs"),
(html! { <NotebookText /> }, "Notebook Text"),
(html! { <Notebook /> }, "Notebook"),
(html! { <NotepadTextDashed /> }, "Notepad Text Dashed"),
(html! { <NotepadText /> }, "Notepad Text"),
(html! { <NutOff /> }, "Nut Off"),
(html! { <Nut /> }, "Nut"),
];
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! { <OctagonAlert /> }, "Octagon Alert"),
(html! { <OctagonMinus /> }, "Octagon Minus"),
(html! { <OctagonPause /> }, "Octagon Pause"),
(html! { <OctagonX /> }, "Octagon X"),
(html! { <Octagon /> }, "Octagon"),
(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! { <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! { <Package /> }, "Package"),
(html! { <PaintBucket /> }, "Paint Bucket"),
(html! { <PaintRoller /> }, "Paint Roller"),
(html! { <PaintbrushVertical /> }, "Paintbrush Vertical"),
(html! { <Paintbrush /> }, "Paintbrush"),
(html! { <Palette /> }, "Palette"),
(html! { <PanelBottomClose /> }, "Panel Bottom Close"),
(html! { <PanelBottomDashed /> }, "Panel Bottom Dashed"),
(html! { <PanelBottomOpen /> }, "Panel Bottom Open"),
(html! { <PanelBottom /> }, "Panel Bottom"),
(html! { <PanelLeftClose /> }, "Panel Left Close"),
(html! { <PanelLeftDashed /> }, "Panel Left Dashed"),
(html! { <PanelLeftOpen /> }, "Panel Left Open"),
(html! { <PanelLeft /> }, "Panel Left"),
(html! { <PanelRightClose /> }, "Panel Right Close"),
(html! { <PanelRightDashed /> }, "Panel Right Dashed"),
(html! { <PanelRightOpen /> }, "Panel Right Open"),
(html! { <PanelRight /> }, "Panel Right"),
(html! { <PanelTopClose /> }, "Panel Top Close"),
(html! { <PanelTopDashed /> }, "Panel Top Dashed"),
(html! { <PanelTopOpen /> }, "Panel Top Open"),
(html! { <PanelTop /> }, "Panel Top"),
(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! { <PenLine /> }, "Pen Line"),
(html! { <PenOff /> }, "Pen Off"),
(html! { <PenTool /> }, "Pen Tool"),
(html! { <Pen /> }, "Pen"),
(html! { <PencilLine /> }, "Pencil Line"),
(html! { <PencilOff /> }, "Pencil Off"),
(html! { <PencilRuler /> }, "Pencil Ruler"),
(html! { <Pencil /> }, "Pencil"),
(html! { <Pentagon /> }, "Pentagon"),
(html! { <Percent /> }, "Percent"),
(html! { <PersonStanding /> }, "Person Standing"),
(html! { <PhilippinePeso /> }, "Philippine Peso"),
(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! { <Phone /> }, "Phone"),
(html! { <Pi /> }, "Pi"),
(html! { <Piano /> }, "Piano"),
(html! { <Pickaxe /> }, "Pickaxe"),
(html! { <PictureInPicture2 /> }, "Picture In Picture 2"),
(html! { <PictureInPicture /> }, "Picture In Picture"),
(html! { <PiggyBank /> }, "Piggy Bank"),
(html! { <PilcrowLeft /> }, "Pilcrow Left"),
(html! { <PilcrowRight /> }, "Pilcrow Right"),
(html! { <Pilcrow /> }, "Pilcrow"),
(html! { <PillBottle /> }, "Pill Bottle"),
(html! { <Pill /> }, "Pill"),
(html! { <PinOff /> }, "Pin Off"),
(html! { <Pin /> }, "Pin"),
(html! { <Pipette /> }, "Pipette"),
(html! { <Pizza /> }, "Pizza"),
(html! { <PlaneLanding /> }, "Plane Landing"),
(html! { <PlaneTakeoff /> }, "Plane Takeoff"),
(html! { <Plane /> }, "Plane"),
(html! { <Play /> }, "Play"),
(html! { <Plug2 /> }, "Plug 2"),
(html! { <PlugZap /> }, "Plug Zap"),
(html! { <Plug /> }, "Plug"),
(html! { <Plus /> }, "Plus"),
(html! { <PocketKnife /> }, "Pocket Knife"),
(html! { <Pocket /> }, "Pocket"),
(html! { <Podcast /> }, "Podcast"),
(html! { <PointerOff /> }, "Pointer Off"),
(html! { <Pointer /> }, "Pointer"),
(html! { <Popcorn /> }, "Popcorn"),
(html! { <Popsicle /> }, "Popsicle"),
(html! { <PoundSterling /> }, "Pound Sterling"),
(html! { <PowerOff /> }, "Power Off"),
(html! { <Power /> }, "Power"),
(html! { <Presentation /> }, "Presentation"),
(html! { <PrinterCheck /> }, "Printer Check"),
(html! { <Printer /> }, "Printer"),
(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! { <RadioReceiver /> }, "Radio Receiver"),
(html! { <RadioTower /> }, "Radio Tower"),
(html! { <Radio /> }, "Radio"),
(html! { <Radius /> }, "Radius"),
(html! { <RailSymbol /> }, "Rail Symbol"),
(html! { <Rainbow /> }, "Rainbow"),
(html! { <Rat /> }, "Rat"),
(html! { <Ratio /> }, "Ratio"),
(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! { <Receipt /> }, "Receipt"),
(html! { <RectangleEllipsis /> }, "Rectangle Ellipsis"),
(html! { <RectangleHorizontal /> }, "Rectangle Horizontal"),
(html! { <RectangleVertical /> }, "Rectangle Vertical"),
(html! { <Recycle /> }, "Recycle"),
(html! { <Redo2 /> }, "Redo 2"),
(html! { <RedoDot /> }, "Redo Dot"),
(html! { <Redo /> }, "Redo"),
(html! { <RefreshCcwDot /> }, "Refresh Ccw Dot"),
(html! { <RefreshCcw /> }, "Refresh Ccw"),
(html! { <RefreshCwOff /> }, "Refresh Cw Off"),
(html! { <RefreshCw /> }, "Refresh Cw"),
(html! { <Refrigerator /> }, "Refrigerator"),
(html! { <Regex /> }, "Regex"),
(html! { <RemoveFormatting /> }, "Remove Formatting"),
(html! { <Repeat1 /> }, "Repeat 1"),
(html! { <Repeat2 /> }, "Repeat 2"),
(html! { <Repeat /> }, "Repeat"),
(html! { <ReplaceAll /> }, "Replace All"),
(html! { <Replace /> }, "Replace"),
(html! { <ReplyAll /> }, "Reply All"),
(html! { <Reply /> }, "Reply"),
(html! { <Rewind /> }, "Rewind"),
(html! { <Ribbon /> }, "Ribbon"),
(html! { <Rocket /> }, "Rocket"),
(html! { <RockingChair /> }, "Rocking Chair"),
(html! { <RollerCoaster /> }, "Roller Coaster"),
(html! { <Rotate3D /> }, "Rotate 3 D"),
(html! { <RotateCcwSquare /> }, "Rotate Ccw Square"),
(html! { <RotateCcw /> }, "Rotate Ccw"),
(html! { <RotateCwSquare /> }, "Rotate Cw Square"),
(html! { <RotateCw /> }, "Rotate Cw"),
(html! { <RouteOff /> }, "Route Off"),
(html! { <Route /> }, "Route"),
(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! { <SatelliteDish /> }, "Satellite Dish"),
(html! { <Satellite /> }, "Satellite"),
(html! { <SaveAll /> }, "Save All"),
(html! { <SaveOff /> }, "Save Off"),
(html! { <Save /> }, "Save"),
(html! { <Scale3D /> }, "Scale 3 D"),
(html! { <Scale /> }, "Scale"),
(html! { <Scaling /> }, "Scaling"),
(html! { <ScanBarcode /> }, "Scan Barcode"),
(html! { <ScanEye /> }, "Scan Eye"),
(html! { <ScanFace /> }, "Scan Face"),
(html! { <ScanLine /> }, "Scan Line"),
(html! { <ScanQrCode /> }, "Scan Qr Code"),
(html! { <ScanSearch /> }, "Scan Search"),
(html! { <ScanText /> }, "Scan Text"),
(html! { <Scan /> }, "Scan"),
(html! { <School /> }, "School"),
(html! { <ScissorsLineDashed /> }, "Scissors Line Dashed"),
(html! { <Scissors /> }, "Scissors"),
(html! { <ScreenShareOff /> }, "Screen Share Off"),
(html! { <ScreenShare /> }, "Screen Share"),
(html! { <ScrollText /> }, "Scroll Text"),
(html! { <Scroll /> }, "Scroll"),
(html! { <SearchCheck /> }, "Search Check"),
(html! { <SearchCode /> }, "Search Code"),
(html! { <SearchSlash /> }, "Search Slash"),
(html! { <SearchX /> }, "Search X"),
(html! { <Search /> }, "Search"),
(html! { <Section /> }, "Section"),
(html! { <SendHorizontal /> }, "Send Horizontal"),
(html! { <SendToBack /> }, "Send To Back"),
(html! { <Send /> }, "Send"),
(html! { <SeparatorHorizontal /> }, "Separator Horizontal"),
(html! { <SeparatorVertical /> }, "Separator Vertical"),
(html! { <ServerCog /> }, "Server Cog"),
(html! { <ServerCrash /> }, "Server Crash"),
(html! { <ServerOff /> }, "Server Off"),
(html! { <Server /> }, "Server"),
(html! { <Settings2 /> }, "Settings 2"),
(html! { <Settings /> }, "Settings"),
(html! { <Shapes /> }, "Shapes"),
(html! { <Share2 /> }, "Share 2"),
(html! { <Share /> }, "Share"),
(html! { <Sheet /> }, "Sheet"),
(html! { <Shell /> }, "Shell"),
(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! { <Shield /> }, "Shield"),
(html! { <ShipWheel /> }, "Ship Wheel"),
(html! { <Ship /> }, "Ship"),
(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! { <SignalHigh /> }, "Signal High"),
(html! { <SignalLow /> }, "Signal Low"),
(html! { <SignalMedium /> }, "Signal Medium"),
(html! { <SignalZero /> }, "Signal Zero"),
(html! { <Signal /> }, "Signal"),
(html! { <Signature /> }, "Signature"),
(html! { <SignpostBig /> }, "Signpost Big"),
(html! { <Signpost /> }, "Signpost"),
(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! { <SmartphoneCharging /> }, "Smartphone Charging"),
(html! { <SmartphoneNfc /> }, "Smartphone Nfc"),
(html! { <Smartphone /> }, "Smartphone"),
(html! { <SmilePlus /> }, "Smile Plus"),
(html! { <Smile /> }, "Smile"),
(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! { <SpellCheck2 /> }, "Spell Check 2"),
(html! { <SpellCheck /> }, "Spell Check"),
(html! { <Spline /> }, "Spline"),
(html! { <Split /> }, "Split"),
(html! { <SprayCan /> }, "Spray Can"),
(html! { <Sprout /> }, "Sprout"),
(html! { <SquareActivity /> }, "Square Activity"),
(html! { <SquareArrowDownLeft /> }, "Square Arrow Down Left"),
(
html! { <SquareArrowDownRight /> },
"Square Arrow Down Right",
),
(html! { <SquareArrowDown /> }, "Square Arrow Down"),
(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! { <SquareArrowUpLeft /> }, "Square Arrow Up Left"),
(html! { <SquareArrowUpRight /> }, "Square Arrow Up Right"),
(html! { <SquareArrowUp /> }, "Square Arrow Up"),
(html! { <SquareAsterisk /> }, "Square Asterisk"),
(
html! { <SquareBottomDashedScissors /> },
"Square Bottom Dashed Scissors",
),
(html! { <SquareChartGantt /> }, "Square Chart Gantt"),
(html! { <SquareCheckBig /> }, "Square Check Big"),
(html! { <SquareCheck /> }, "Square Check"),
(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! { <SquareDashedBottomCode /> },
"Square Dashed Bottom Code",
),
(html! { <SquareDashedBottom /> }, "Square Dashed Bottom"),
(html! { <SquareDashedKanban /> }, "Square Dashed Kanban"),
(
html! { <SquareDashedMousePointer /> },
"Square Dashed Mouse Pointer",
),
(html! { <SquareDashed /> }, "Square Dashed"),
(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! { <SquareParkingOff /> }, "Square Parking Off"),
(html! { <SquareParking /> }, "Square Parking"),
(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! { <SquareUserRound /> }, "Square User Round"),
(html! { <SquareUser /> }, "Square User"),
(html! { <SquareX /> }, "Square X"),
(html! { <Square /> }, "Square"),
(html! { <Squircle /> }, "Squircle"),
(html! { <Squirrel /> }, "Squirrel"),
(html! { <Stamp /> }, "Stamp"),
(html! { <StarHalf /> }, "Star Half"),
(html! { <StarOff /> }, "Star Off"),
(html! { <Star /> }, "Star"),
(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! { <SunDim /> }, "Sun Dim"),
(html! { <SunMedium /> }, "Sun Medium"),
(html! { <SunMoon /> }, "Sun Moon"),
(html! { <SunSnow /> }, "Sun Snow"),
(html! { <Sun /> }, "Sun"),
(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! { <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! { <Table /> }, "Table"),
(html! { <TabletSmartphone /> }, "Tablet Smartphone"),
(html! { <Tablet /> }, "Tablet"),
(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! { <TentTree /> }, "Tent Tree"),
(html! { <Tent /> }, "Tent"),
(html! { <Terminal /> }, "Terminal"),
(html! { <TestTubeDiagonal /> }, "Test Tube Diagonal"),
(html! { <TestTube /> }, "Test Tube"),
(html! { <TestTubes /> }, "Test Tubes"),
(html! { <TextCursorInput /> }, "Text Cursor Input"),
(html! { <TextCursor /> }, "Text Cursor"),
(html! { <TextQuote /> }, "Text Quote"),
(html! { <TextSearch /> }, "Text Search"),
(html! { <TextSelect /> }, "Text Select"),
(html! { <Text /> }, "Text"),
(html! { <Theater /> }, "Theater"),
(html! { <ThermometerSnowflake /> }, "Thermometer Snowflake"),
(html! { <ThermometerSun /> }, "Thermometer Sun"),
(html! { <Thermometer /> }, "Thermometer"),
(html! { <ThumbsDown /> }, "Thumbs Down"),
(html! { <ThumbsUp /> }, "Thumbs Up"),
(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! { <Ticket /> }, "Ticket"),
(html! { <TicketsPlane /> }, "Tickets Plane"),
(html! { <Tickets /> }, "Tickets"),
(html! { <TimerOff /> }, "Timer Off"),
(html! { <TimerReset /> }, "Timer Reset"),
(html! { <Timer /> }, "Timer"),
(html! { <ToggleLeft /> }, "Toggle Left"),
(html! { <ToggleRight /> }, "Toggle Right"),
(html! { <Toilet /> }, "Toilet"),
(html! { <Tornado /> }, "Tornado"),
(html! { <Torus /> }, "Torus"),
(html! { <TouchpadOff /> }, "Touchpad Off"),
(html! { <Touchpad /> }, "Touchpad"),
(html! { <TowerControl /> }, "Tower Control"),
(html! { <ToyBrick /> }, "Toy Brick"),
(html! { <Tractor /> }, "Tractor"),
(html! { <TrafficCone /> }, "Traffic Cone"),
(html! { <TrainFrontTunnel /> }, "Train Front Tunnel"),
(html! { <TrainFront /> }, "Train Front"),
(html! { <TrainTrack /> }, "Train Track"),
(html! { <TramFront /> }, "Tram Front"),
(html! { <Trash2 /> }, "Trash 2"),
(html! { <Trash /> }, "Trash"),
(html! { <TreeDeciduous /> }, "Tree Deciduous"),
(html! { <TreePalm /> }, "Tree Palm"),
(html! { <TreePine /> }, "Tree Pine"),
(html! { <Trees /> }, "Trees"),
(html! { <Trello /> }, "Trello"),
(html! { <TrendingDown /> }, "Trending Down"),
(html! { <TrendingUpDown /> }, "Trending Up Down"),
(html! { <TrendingUp /> }, "Trending Up"),
(html! { <TriangleAlert /> }, "Triangle Alert"),
(html! { <TriangleRight /> }, "Triangle Right"),
(html! { <Triangle /> }, "Triangle"),
(html! { <Trophy /> }, "Trophy"),
(html! { <Truck /> }, "Truck"),
(html! { <Turtle /> }, "Turtle"),
(html! { <TvMinimalPlay /> }, "Tv Minimal Play"),
(html! { <TvMinimal /> }, "Tv Minimal"),
(html! { <Tv /> }, "Tv"),
(html! { <Twitch /> }, "Twitch"),
(html! { <Twitter /> }, "Twitter"),
(html! { <TypeOutline /> }, "Type Outline"),
(html! { <Type /> }, "Type"),
];
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! { <UmbrellaOff /> }, "Umbrella Off"),
(html! { <Umbrella /> }, "Umbrella"),
(html! { <Underline /> }, "Underline"),
(html! { <Undo2 /> }, "Undo 2"),
(html! { <UndoDot /> }, "Undo Dot"),
(html! { <Undo /> }, "Undo"),
(html! { <UnfoldHorizontal /> }, "Unfold Horizontal"),
(html! { <UnfoldVertical /> }, "Unfold Vertical"),
(html! { <Ungroup /> }, "Ungroup"),
(html! { <University /> }, "University"),
(html! { <Unlink2 /> }, "Unlink 2"),
(html! { <Unlink /> }, "Unlink"),
(html! { <Unplug /> }, "Unplug"),
(html! { <Upload /> }, "Upload"),
(html! { <Usb /> }, "Usb"),
(html! { <UserCheck /> }, "User Check"),
(html! { <UserCog /> }, "User Cog"),
(html! { <UserMinus /> }, "User Minus"),
(html! { <UserPen /> }, "User Pen"),
(html! { <UserPlus /> }, "User Plus"),
(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! { <UserRound /> }, "User Round"),
(html! { <UserSearch /> }, "User Search"),
(html! { <UserX /> }, "User X"),
(html! { <User /> }, "User"),
(html! { <UsersRound /> }, "Users Round"),
(html! { <Users /> }, "Users"),
(html! { <UtensilsCrossed /> }, "Utensils Crossed"),
(html! { <Utensils /> }, "Utensils"),
(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! { <VibrateOff /> }, "Vibrate Off"),
(html! { <Vibrate /> }, "Vibrate"),
(html! { <VideoOff /> }, "Video Off"),
(html! { <Video /> }, "Video"),
(html! { <Videotape /> }, "Videotape"),
(html! { <View /> }, "View"),
(html! { <Voicemail /> }, "Voicemail"),
(html! { <Volleyball /> }, "Volleyball"),
(html! { <Volume1 /> }, "Volume 1"),
(html! { <Volume2 /> }, "Volume 2"),
(html! { <VolumeOff /> }, "Volume Off"),
(html! { <VolumeX /> }, "Volume X"),
(html! { <Volume /> }, "Volume"),
(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! { <WalletCards /> }, "Wallet Cards"),
(html! { <WalletMinimal /> }, "Wallet Minimal"),
(html! { <Wallet /> }, "Wallet"),
(html! { <Wallpaper /> }, "Wallpaper"),
(html! { <WandSparkles /> }, "Wand Sparkles"),
(html! { <Wand /> }, "Wand"),
(html! { <Warehouse /> }, "Warehouse"),
(html! { <WashingMachine /> }, "Washing Machine"),
(html! { <Watch /> }, "Watch"),
(html! { <Waves /> }, "Waves"),
(html! { <Waypoints /> }, "Waypoints"),
(html! { <Webcam /> }, "Webcam"),
(html! { <WebhookOff /> }, "Webhook Off"),
(html! { <Webhook /> }, "Webhook"),
(html! { <Weight /> }, "Weight"),
(html! { <WheatOff /> }, "Wheat Off"),
(html! { <Wheat /> }, "Wheat"),
(html! { <WholeWord /> }, "Whole Word"),
(html! { <WifiHigh /> }, "Wifi High"),
(html! { <WifiLow /> }, "Wifi Low"),
(html! { <WifiOff /> }, "Wifi Off"),
(html! { <WifiZero /> }, "Wifi Zero"),
(html! { <Wifi /> }, "Wifi"),
(html! { <WindArrowDown /> }, "Wind Arrow Down"),
(html! { <Wind /> }, "Wind"),
(html! { <WineOff /> }, "Wine Off"),
(html! { <Wine /> }, "Wine"),
(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! { <ZapOff /> }, "Zap Off"),
(html! { <Zap /> }, "Zap"),
(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>()
}