Icons
A crisp set of 15×15 icons. All icons are available as individual components.
use dioxus::prelude::*;
use radix_dioxus_icons::*;
#[component]
pub fn Icons() -> Element {
rsx! {
div { class: "w-full max-w-80 py-4",
IconsA {}
IconsB {}
IconsC {}
IconsD {}
IconsE {}
IconsF {}
IconsG {}
IconsH {}
IconsI {}
IconsK {}
IconsL {}
IconsM {}
IconsN {}
IconsO {}
IconsP {}
IconsQ {}
IconsR {}
IconsS {}
IconsT {}
IconsU {}
IconsV {}
IconsW {}
IconsZ {}
}
}
}
#[component]
pub fn IconsA() -> Element {
let icons = [
(
rsx! {
AccessibilityIcon {}
},
"Accessibility",
),
(
rsx! {
ActivityLogIcon {}
},
"Activity Log",
),
(
rsx! {
AlignBaselineIcon {}
},
"Align Baseline",
),
(
rsx! {
AlignBottomIcon {}
},
"Align Bottom",
),
(
rsx! {
AlignCenterHorizontallyIcon {}
},
"Align Center Horizontally",
),
(
rsx! {
AlignCenterVerticallyIcon {}
},
"Align Center Vertically",
),
(
rsx! {
AlignLeftIcon {}
},
"Align Left",
),
(
rsx! {
AlignRightIcon {}
},
"Align Right",
),
(
rsx! {
AlignTopIcon {}
},
"Align Top",
),
(
rsx! {
AllSidesIcon {}
},
"All Sides",
),
(
rsx! {
AngleIcon {}
},
"Angle",
),
(
rsx! {
ArchiveIcon {}
},
"Archive",
),
(
rsx! {
ArrowBottomLeftIcon {}
},
"Arrow Bottom Left",
),
(
rsx! {
ArrowBottomRightIcon {}
},
"Arrow Bottom Right",
),
(
rsx! {
ArrowDownIcon {}
},
"Arrow Down",
),
(
rsx! {
ArrowLeftIcon {}
},
"Arrow Left",
),
(
rsx! {
ArrowRightIcon {}
},
"Arrow Right",
),
(
rsx! {
ArrowTopLeftIcon {}
},
"Arrow Top Left",
),
(
rsx! {
ArrowTopRightIcon {}
},
"Arrow Top Right",
),
(
rsx! {
ArrowUpIcon {}
},
"Arrow Up",
),
(
rsx! {
AspectRatioIcon {}
},
"Aspect Ratio",
),
(
rsx! {
AvatarIcon {}
},
"Avatar",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsB() -> Element {
let icons = [
(
rsx! {
BackpackIcon {}
},
"Backpack",
),
(
rsx! {
BadgeIcon {}
},
"Badge",
),
(
rsx! {
BarChartIcon {}
},
"Bar Chart",
),
(
rsx! {
BellIcon {}
},
"Bell",
),
(
rsx! {
BlendingModeIcon {}
},
"Blending Mode",
),
(
rsx! {
BookmarkIcon {}
},
"Bookmark",
),
(
rsx! {
BookmarkFilledIcon {}
},
"Bookmark Filled",
),
(
rsx! {
BorderAllIcon {}
},
"Border All",
),
(
rsx! {
BorderBottomIcon {}
},
"Border Bottom",
),
(
rsx! {
BorderDashedIcon {}
},
"Border Dashed",
),
(
rsx! {
BorderDottedIcon {}
},
"Border Dotted",
),
(
rsx! {
BorderLeftIcon {}
},
"Border Left",
),
(
rsx! {
BorderNoneIcon {}
},
"Border None",
),
(
rsx! {
BorderRightIcon {}
},
"Border Right",
),
(
rsx! {
BorderSolidIcon {}
},
"Border Solid",
),
(
rsx! {
BorderSplitIcon {}
},
"Border Split",
),
(
rsx! {
BorderStyleIcon {}
},
"Border Style",
),
(
rsx! {
BorderTopIcon {}
},
"Border Top",
),
(
rsx! {
BorderWidthIcon {}
},
"Border Width",
),
(
rsx! {
BoxIcon {}
},
"Box",
),
(
rsx! {
BoxModelIcon {}
},
"Box Model",
),
(
rsx! {
ButtonIcon {}
},
"Button",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsC() -> Element {
let icons = [
(
rsx! {
CalendarIcon {}
},
"Calendar",
),
(
rsx! {
CameraIcon {}
},
"Camera",
),
(
rsx! {
CardStackIcon {}
},
"Card Stack",
),
(
rsx! {
CardStackMinusIcon {}
},
"Card Stack Minus",
),
(
rsx! {
CardStackPlusIcon {}
},
"Card Stack Plus",
),
(
rsx! {
CaretDownIcon {}
},
"Caret Down",
),
(
rsx! {
CaretLeftIcon {}
},
"Caret Left",
),
(
rsx! {
CaretRightIcon {}
},
"Caret Right",
),
(
rsx! {
CaretSortIcon {}
},
"Caret Sort",
),
(
rsx! {
CaretUpIcon {}
},
"Caret Up",
),
(
rsx! {
ChatBubbleIcon {}
},
"Chat Bubble",
),
(
rsx! {
CheckIcon {}
},
"Check",
),
(
rsx! {
CheckCircledIcon {}
},
"Check Circled",
),
(
rsx! {
CheckboxIcon {}
},
"Checkbox",
),
(
rsx! {
ChevronDownIcon {}
},
"Chevron Down",
),
(
rsx! {
ChevronLeftIcon {}
},
"Chevron Left",
),
(
rsx! {
ChevronRightIcon {}
},
"Chevron Right",
),
(
rsx! {
ChevronUpIcon {}
},
"Chevron Up",
),
(
rsx! {
CircleIcon {}
},
"Circle",
),
(
rsx! {
CircleBackslashIcon {}
},
"Circle Backslash",
),
(
rsx! {
ClipboardIcon {}
},
"Clipboard",
),
(
rsx! {
ClipboardCopyIcon {}
},
"Clipboard Copy",
),
(
rsx! {
ClockIcon {}
},
"Clock",
),
(
rsx! {
CodeIcon {}
},
"Code",
),
(
rsx! {
CodesandboxLogoIcon {}
},
"Codesandbox Logo",
),
(
rsx! {
ColorWheelIcon {}
},
"Color Wheel",
),
(
rsx! {
ColumnSpacingIcon {}
},
"Column Spacing",
),
(
rsx! {
ColumnsIcon {}
},
"Columns",
),
(
rsx! {
CommitIcon {}
},
"Commit",
),
(
rsx! {
Component1Icon {}
},
"Component 1",
),
(
rsx! {
Component2Icon {}
},
"Component 2",
),
(
rsx! {
ComponentBooleanIcon {}
},
"Component Boolean",
),
(
rsx! {
ComponentInstanceIcon {}
},
"Component Instance",
),
(
rsx! {
ComponentNoneIcon {}
},
"Component None",
),
(
rsx! {
ComponentPlaceholderIcon {}
},
"Component Placeholder",
),
(
rsx! {
ContainerIcon {}
},
"Container",
),
(
rsx! {
CookieIcon {}
},
"Cookie",
),
(
rsx! {
CopyIcon {}
},
"Copy",
),
(
rsx! {
CornerBottomLeftIcon {}
},
"Corner Bottom Left",
),
(
rsx! {
CornerBottomRightIcon {}
},
"Corner Bottom Right",
),
(
rsx! {
CornerTopLeftIcon {}
},
"Corner Top Left",
),
(
rsx! {
CornerTopRightIcon {}
},
"Corner Top Right",
),
(
rsx! {
CornersIcon {}
},
"Corners",
),
(
rsx! {
CountdownTimerIcon {}
},
"Countdown Timer",
),
(
rsx! {
CounterClockwiseClockIcon {}
},
"Counter Clockwise Clock",
),
(
rsx! {
CropIcon {}
},
"Crop",
),
(
rsx! {
Cross1Icon {}
},
"Cross 1",
),
(
rsx! {
Cross2Icon {}
},
"Cross 2",
),
(
rsx! {
CrossCircledIcon {}
},
"Cross Circled",
),
(
rsx! {
Crosshair1Icon {}
},
"Crosshair 1",
),
(
rsx! {
Crosshair2Icon {}
},
"Crosshair 2",
),
(
rsx! {
CrumpledPaperIcon {}
},
"Crumpled Paper",
),
(
rsx! {
CubeIcon {}
},
"Cube",
),
(
rsx! {
CursorArrowIcon {}
},
"Cursor Arrow",
),
(
rsx! {
CursorTextIcon {}
},
"Cursor Text",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsD() -> Element {
let icons = [
(
rsx! {
DashIcon {}
},
"Dash",
),
(
rsx! {
DashboardIcon {}
},
"Dashboard",
),
(
rsx! {
DesktopIcon {}
},
"Desktop",
),
(
rsx! {
DimensionsIcon {}
},
"Dimensions",
),
(
rsx! {
DiscIcon {}
},
"Disc",
),
(
rsx! {
DiscordLogoIcon {}
},
"Discord Logo",
),
(
rsx! {
DividerHorizontalIcon {}
},
"Divider Horizontal",
),
(
rsx! {
DividerVerticalIcon {}
},
"Divider Vertical",
),
(
rsx! {
DotIcon {}
},
"Dot",
),
(
rsx! {
DotFilledIcon {}
},
"Dot Filled",
),
(
rsx! {
DotsHorizontalIcon {}
},
"Dots Horizontal",
),
(
rsx! {
DotsVerticalIcon {}
},
"Dots Vertical",
),
(
rsx! {
DoubleArrowDownIcon {}
},
"Double Arrow Down",
),
(
rsx! {
DoubleArrowLeftIcon {}
},
"Double Arrow Left",
),
(
rsx! {
DoubleArrowRightIcon {}
},
"Double Arrow Right",
),
(
rsx! {
DoubleArrowUpIcon {}
},
"Double Arrow Up",
),
(
rsx! {
DownloadIcon {}
},
"Download",
),
(
rsx! {
DragHandleDots1Icon {}
},
"Drag Handle Dots 1",
),
(
rsx! {
DragHandleDots2Icon {}
},
"Drag Handle Dots 2",
),
(
rsx! {
DragHandleHorizontalIcon {}
},
"Drag Handle Horizontal",
),
(
rsx! {
DragHandleVerticalIcon {}
},
"Drag Handle Vertical",
),
(
rsx! {
DrawingPinIcon {}
},
"Drawing Pin",
),
(
rsx! {
DrawingPinFilledIcon {}
},
"Drawing Pin Filled",
),
(
rsx! {
DropdownMenuIcon {}
},
"Dropdown Menu",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsE() -> Element {
let icons = [
(
rsx! {
EnterIcon {}
},
"Enter",
),
(
rsx! {
EnterFullScreenIcon {}
},
"Enter Full Screen",
),
(
rsx! {
EnvelopeClosedIcon {}
},
"Envelope Closed",
),
(
rsx! {
EnvelopeOpenIcon {}
},
"Envelope Open",
),
(
rsx! {
EraserIcon {}
},
"Eraser",
),
(
rsx! {
ExclamationTriangleIcon {}
},
"Exclamation Triangle",
),
(
rsx! {
ExitIcon {}
},
"Exit",
),
(
rsx! {
ExitFullScreenIcon {}
},
"Exit Full Screen",
),
(
rsx! {
ExternalLinkIcon {}
},
"External Link",
),
(
rsx! {
EyeClosedIcon {}
},
"Eye Closed",
),
(
rsx! {
EyeNoneIcon {}
},
"Eye None",
),
(
rsx! {
EyeOpenIcon {}
},
"Eye Open",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsF() -> Element {
let icons = [
(
rsx! {
FaceIcon {}
},
"Face",
),
(
rsx! {
FigmaLogoIcon {}
},
"Figma Logo",
),
(
rsx! {
FileIcon {}
},
"File",
),
(
rsx! {
FileMinusIcon {}
},
"File Minus",
),
(
rsx! {
FilePlusIcon {}
},
"File Plus",
),
(
rsx! {
FileTextIcon {}
},
"File Text",
),
(
rsx! {
FontBoldIcon {}
},
"Font Bold",
),
(
rsx! {
FontFamilyIcon {}
},
"Font Family",
),
(
rsx! {
FontItalicIcon {}
},
"Font Italic",
),
(
rsx! {
FontRomanIcon {}
},
"Font Roman",
),
(
rsx! {
FontSizeIcon {}
},
"Font Size",
),
(
rsx! {
FontStyleIcon {}
},
"Font Style",
),
(
rsx! {
FrameIcon {}
},
"Frame",
),
(
rsx! {
FramerLogoIcon {}
},
"Framer Logo",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsG() -> Element {
let icons = [
(
rsx! {
GearIcon {}
},
"Gear",
),
(
rsx! {
GithubLogoIcon {}
},
"Github Logo",
),
(
rsx! {
GlobeIcon {}
},
"Globe",
),
(
rsx! {
GridIcon {}
},
"Grid",
),
(
rsx! {
GroupIcon {}
},
"Group",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsH() -> Element {
let icons = [
(
rsx! {
Half1Icon {}
},
"Half 1",
),
(
rsx! {
Half2Icon {}
},
"Half 2",
),
(
rsx! {
HamburgerMenuIcon {}
},
"Hamburger Menu",
),
(
rsx! {
HandIcon {}
},
"Hand",
),
(
rsx! {
HeadingIcon {}
},
"Heading",
),
(
rsx! {
HeartIcon {}
},
"Heart",
),
(
rsx! {
HeartFilledIcon {}
},
"Heart Filled",
),
(
rsx! {
HeightIcon {}
},
"Height",
),
(
rsx! {
HobbyKnifeIcon {}
},
"Hobby Knife",
),
(
rsx! {
HomeIcon {}
},
"Home",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsI() -> Element {
let icons = [
(
rsx! {
IconjarLogoIcon {}
},
"Iconjar Logo",
),
(
rsx! {
IdCardIcon {}
},
"Id Card",
),
(
rsx! {
ImageIcon {}
},
"Image",
),
(
rsx! {
InfoCircledIcon {}
},
"Info Circled",
),
(
rsx! {
InputIcon {}
},
"Input",
),
(
rsx! {
InstagramLogoIcon {}
},
"Instagram Logo",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsK() -> Element {
let icons = [(
rsx! {
KeyboardIcon {}
},
"Keyboard",
)];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsL() -> Element {
let icons = [
(
rsx! {
LapTimerIcon {}
},
"Lap Timer",
),
(
rsx! {
LaptopIcon {}
},
"Laptop",
),
(
rsx! {
LayersIcon {}
},
"Layers",
),
(
rsx! {
LayoutIcon {}
},
"Layout",
),
(
rsx! {
LetterCaseCapitalizeIcon {}
},
"Letter Case Capitalize",
),
(
rsx! {
LetterCaseLowercaseIcon {}
},
"Letter Case Lowercase",
),
(
rsx! {
LetterCaseToggleIcon {}
},
"Letter Case Toggle",
),
(
rsx! {
LetterCaseUppercaseIcon {}
},
"Letter Case Uppercase",
),
(
rsx! {
LetterSpacingIcon {}
},
"Letter Spacing",
),
(
rsx! {
LightningBoltIcon {}
},
"Lightning Bolt",
),
(
rsx! {
LineHeightIcon {}
},
"Line Height",
),
(
rsx! {
Link1Icon {}
},
"Link 1",
),
(
rsx! {
Link2Icon {}
},
"Link 2",
),
(
rsx! {
LinkBreak1Icon {}
},
"Link Break 1",
),
(
rsx! {
LinkBreak2Icon {}
},
"Link Break 2",
),
(
rsx! {
LinkNone1Icon {}
},
"Link None 1",
),
(
rsx! {
LinkNone2Icon {}
},
"Link None 2",
),
(
rsx! {
LinkedinLogoIcon {}
},
"Linkedin Logo",
),
(
rsx! {
ListBulletIcon {}
},
"List Bullet",
),
(
rsx! {
LockClosedIcon {}
},
"Lock Closed",
),
(
rsx! {
LockOpen1Icon {}
},
"Lock Open 1",
),
(
rsx! {
LockOpen2Icon {}
},
"Lock Open 2",
),
(
rsx! {
LoopIcon {}
},
"Loop",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsM() -> Element {
let icons = [
(
rsx! {
MagicWandIcon {}
},
"Magic Wand",
),
(
rsx! {
MagnifyingGlassIcon {}
},
"Magnifying Glass",
),
(
rsx! {
MarginIcon {}
},
"Margin",
),
(
rsx! {
MaskOffIcon {}
},
"Mask Off",
),
(
rsx! {
MaskOnIcon {}
},
"Mask On",
),
(
rsx! {
MinusIcon {}
},
"Minus",
),
(
rsx! {
MinusCircledIcon {}
},
"Minus Circled",
),
(
rsx! {
MixIcon {}
},
"Mix",
),
(
rsx! {
MixerHorizontalIcon {}
},
"Mixer Horizontal",
),
(
rsx! {
MixerVerticalIcon {}
},
"Mixer Vertical",
),
(
rsx! {
MobileIcon {}
},
"Mobile",
),
(
rsx! {
ModulzLogoIcon {}
},
"Modulz Logo",
),
(
rsx! {
MoonIcon {}
},
"Moon",
),
(
rsx! {
MoveIcon {}
},
"Move",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsN() -> Element {
let icons = [(
rsx! {
NotionLogoIcon {}
},
"Notion Logo",
)];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsO() -> Element {
let icons = [
(
rsx! {
OpacityIcon {}
},
"Opacity",
),
(
rsx! {
OpenInNewWindowIcon {}
},
"Open In New Window",
),
(
rsx! {
OverlineIcon {}
},
"Overline",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsP() -> Element {
let icons = [
(
rsx! {
PaddingIcon {}
},
"Padding",
),
(
rsx! {
PaperPlaneIcon {}
},
"Paper Plane",
),
(
rsx! {
PauseIcon {}
},
"Pause",
),
(
rsx! {
Pencil1Icon {}
},
"Pencil 1",
),
(
rsx! {
Pencil2Icon {}
},
"Pencil 2",
),
(
rsx! {
PersonIcon {}
},
"Person",
),
(
rsx! {
PieChartIcon {}
},
"Pie Chart",
),
(
rsx! {
PilcrowIcon {}
},
"Pilcrow",
),
(
rsx! {
PinBottomIcon {}
},
"Pin Bottom",
),
(
rsx! {
PinLeftIcon {}
},
"Pin Left",
),
(
rsx! {
PinRightIcon {}
},
"Pin Right",
),
(
rsx! {
PinTopIcon {}
},
"Pin Top",
),
(
rsx! {
PlayIcon {}
},
"Play",
),
(
rsx! {
PlusIcon {}
},
"Plus",
),
(
rsx! {
PlusCircledIcon {}
},
"Plus Circled",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsQ() -> Element {
let icons = [
(
rsx! {
QuestionMarkIcon {}
},
"Question Mark",
),
(
rsx! {
QuestionMarkCircledIcon {}
},
"Question Mark Circled",
),
(
rsx! {
QuoteIcon {}
},
"Quote",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsR() -> Element {
let icons = [
(
rsx! {
RadiobuttonIcon {}
},
"Radiobutton",
),
(
rsx! {
ReaderIcon {}
},
"Reader",
),
(
rsx! {
ReloadIcon {}
},
"Reload",
),
(
rsx! {
ResetIcon {}
},
"Reset",
),
(
rsx! {
ResumeIcon {}
},
"Resume",
),
(
rsx! {
RocketIcon {}
},
"Rocket",
),
(
rsx! {
RotateCounterClockwiseIcon {}
},
"Rotate Counter Clockwise",
),
(
rsx! {
RowSpacingIcon {}
},
"Row Spacing",
),
(
rsx! {
RowsIcon {}
},
"Rows",
),
(
rsx! {
RulerHorizontalIcon {}
},
"Ruler Horizontal",
),
(
rsx! {
RulerSquareIcon {}
},
"Ruler Square",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsS() -> Element {
let icons = [
(
rsx! {
ScissorsIcon {}
},
"Scissors",
),
(
rsx! {
SectionIcon {}
},
"Section",
),
(
rsx! {
SewingPinIcon {}
},
"Sewing Pin",
),
(
rsx! {
SewingPinFilledIcon {}
},
"Sewing Pin Filled",
),
(
rsx! {
ShadowIcon {}
},
"Shadow",
),
(
rsx! {
ShadowInnerIcon {}
},
"Shadow Inner",
),
(
rsx! {
ShadowNoneIcon {}
},
"Shadow None",
),
(
rsx! {
ShadowOuterIcon {}
},
"Shadow Outer",
),
(
rsx! {
Share1Icon {}
},
"Share 1",
),
(
rsx! {
Share2Icon {}
},
"Share 2",
),
(
rsx! {
ShuffleIcon {}
},
"Shuffle",
),
(
rsx! {
SizeIcon {}
},
"Size",
),
(
rsx! {
SketchLogoIcon {}
},
"Sketch Logo",
),
(
rsx! {
SlashIcon {}
},
"Slash",
),
(
rsx! {
SliderIcon {}
},
"Slider",
),
(
rsx! {
SpaceBetweenHorizontallyIcon {}
},
"Space Between Horizontally",
),
(
rsx! {
SpaceBetweenVerticallyIcon {}
},
"Space Between Vertically",
),
(
rsx! {
SpaceEvenlyHorizontallyIcon {}
},
"Space Evenly Horizontally",
),
(
rsx! {
SpaceEvenlyVerticallyIcon {}
},
"Space Evenly Vertically",
),
(
rsx! {
SpeakerLoudIcon {}
},
"Speaker Loud",
),
(
rsx! {
SpeakerModerateIcon {}
},
"Speaker Moderate",
),
(
rsx! {
SpeakerOffIcon {}
},
"Speaker Off",
),
(
rsx! {
SpeakerQuietIcon {}
},
"Speaker Quiet",
),
(
rsx! {
SquareIcon {}
},
"Square",
),
(
rsx! {
StackIcon {}
},
"Stack",
),
(
rsx! {
StarIcon {}
},
"Star",
),
(
rsx! {
StarFilledIcon {}
},
"Star Filled",
),
(
rsx! {
StitchesLogoIcon {}
},
"Stitches Logo",
),
(
rsx! {
StopIcon {}
},
"Stop",
),
(
rsx! {
StopwatchIcon {}
},
"Stopwatch",
),
(
rsx! {
StretchHorizontallyIcon {}
},
"Stretch Horizontally",
),
(
rsx! {
StretchVerticallyIcon {}
},
"Stretch Vertically",
),
(
rsx! {
StrikethroughIcon {}
},
"Strikethrough",
),
(
rsx! {
SunIcon {}
},
"Sun",
),
(
rsx! {
SwitchIcon {}
},
"Switch",
),
(
rsx! {
SymbolIcon {}
},
"Symbol",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsT() -> Element {
let icons = [
(
rsx! {
TableIcon {}
},
"Table",
),
(
rsx! {
TargetIcon {}
},
"Target",
),
(
rsx! {
TextIcon {}
},
"Text",
),
(
rsx! {
TextAlignBottomIcon {}
},
"Text Align Bottom",
),
(
rsx! {
TextAlignCenterIcon {}
},
"Text Align Center",
),
(
rsx! {
TextAlignJustifyIcon {}
},
"Text Align Justify",
),
(
rsx! {
TextAlignLeftIcon {}
},
"Text Align Left",
),
(
rsx! {
TextAlignMiddleIcon {}
},
"Text Align Middle",
),
(
rsx! {
TextAlignRightIcon {}
},
"Text Align Right",
),
(
rsx! {
TextAlignTopIcon {}
},
"Text Align Top",
),
(
rsx! {
TextNoneIcon {}
},
"Text None",
),
(
rsx! {
ThickArrowDownIcon {}
},
"Thick Arrow Down",
),
(
rsx! {
ThickArrowLeftIcon {}
},
"Thick Arrow Left",
),
(
rsx! {
ThickArrowRightIcon {}
},
"Thick Arrow Right",
),
(
rsx! {
ThickArrowUpIcon {}
},
"Thick Arrow Up",
),
(
rsx! {
TimerIcon {}
},
"Timer",
),
(
rsx! {
TokensIcon {}
},
"Tokens",
),
(
rsx! {
TrackNextIcon {}
},
"Track Next",
),
(
rsx! {
TrackPreviousIcon {}
},
"Track Previous",
),
(
rsx! {
TransformIcon {}
},
"Transform",
),
(
rsx! {
TransparencyGridIcon {}
},
"Transparency Grid",
),
(
rsx! {
TrashIcon {}
},
"Trash",
),
(
rsx! {
TriangleDownIcon {}
},
"Triangle Down",
),
(
rsx! {
TriangleLeftIcon {}
},
"Triangle Left",
),
(
rsx! {
TriangleRightIcon {}
},
"Triangle Right",
),
(
rsx! {
TriangleUpIcon {}
},
"Triangle Up",
),
(
rsx! {
TwitterLogoIcon {}
},
"Twitter Logo",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsU() -> Element {
let icons = [
(
rsx! {
UnderlineIcon {}
},
"Underline",
),
(
rsx! {
UpdateIcon {}
},
"Update",
),
(
rsx! {
UploadIcon {}
},
"Upload",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsV() -> Element {
let icons = [
(
rsx! {
ValueIcon {}
},
"Value",
),
(
rsx! {
ValueNoneIcon {}
},
"Value None",
),
(
rsx! {
VercelLogoIcon {}
},
"Vercel Logo",
),
(
rsx! {
VideoIcon {}
},
"Video",
),
(
rsx! {
ViewGridIcon {}
},
"View Grid",
),
(
rsx! {
ViewHorizontalIcon {}
},
"View Horizontal",
),
(
rsx! {
ViewNoneIcon {}
},
"View None",
),
(
rsx! {
ViewVerticalIcon {}
},
"View Vertical",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsW() -> Element {
let icons = [(
rsx! {
WidthIcon {}
},
"Width",
)];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
#[component]
pub fn IconsZ() -> Element {
let icons = [
(
rsx! {
ZoomInIcon {}
},
"Zoom In",
),
(
rsx! {
ZoomOutIcon {}
},
"Zoom Out",
),
];
rsx! {
for (icon , name) in icons {
div {
key: "{name}",
class: "flex flex-wrap items-center gap-4 text-sm text-white",
{icon}
span { {name} }
}
}
}
}
use leptos::prelude::*;
use radix_leptos_icons::*;
#[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/>
<IconsK/>
<IconsL/>
<IconsM/>
<IconsN/>
<IconsO/>
<IconsP/>
<IconsQ/>
<IconsR/>
<IconsS/>
<IconsT/>
<IconsU/>
<IconsV/>
<IconsW/>
<IconsZ/>
</div>
}
}
#[component]
pub fn IconsA() -> impl IntoView {
view! {
<For
each=move || [
(view! { <AccessibilityIcon/> }.into_any(), "Accessibility"),
(view! { <ActivityLogIcon/> }.into_any(), "Activity Log"),
(view! { <AlignBaselineIcon/> }.into_any(), "Align Baseline"),
(view! { <AlignBottomIcon/> }.into_any(), "Align Bottom"),
(view! { <AlignCenterHorizontallyIcon/> }.into_any(), "Align Center Horizontally"),
(view! { <AlignCenterVerticallyIcon/> }.into_any(), "Align Center Vertically"),
(view! { <AlignLeftIcon/> }.into_any(), "Align Left"),
(view! { <AlignRightIcon/> }.into_any(), "Align Right"),
(view! { <AlignTopIcon/> }.into_any(), "Align Top"),
(view! { <AllSidesIcon/> }.into_any(), "All Sides"),
(view! { <AngleIcon/> }.into_any(), "Angle"),
(view! { <ArchiveIcon/> }.into_any(), "Archive"),
(view! { <ArrowBottomLeftIcon/> }.into_any(), "Arrow Bottom Left"),
(view! { <ArrowBottomRightIcon/> }.into_any(), "Arrow Bottom Right"),
(view! { <ArrowDownIcon/> }.into_any(), "Arrow Down"),
(view! { <ArrowLeftIcon/> }.into_any(), "Arrow Left"),
(view! { <ArrowRightIcon/> }.into_any(), "Arrow Right"),
(view! { <ArrowTopLeftIcon/> }.into_any(), "Arrow Top Left"),
(view! { <ArrowTopRightIcon/> }.into_any(), "Arrow Top Right"),
(view! { <ArrowUpIcon/> }.into_any(), "Arrow Up"),
(view! { <AspectRatioIcon/> }.into_any(), "Aspect Ratio"),
(view! { <AvatarIcon/> }.into_any(), "Avatar"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsB() -> impl IntoView {
view! {
<For
each=move || [
(view! { <BackpackIcon/> }.into_any(), "Backpack"),
(view! { <BadgeIcon/> }.into_any(), "Badge"),
(view! { <BarChartIcon/> }.into_any(), "Bar Chart"),
(view! { <BellIcon/> }.into_any(), "Bell"),
(view! { <BlendingModeIcon/> }.into_any(), "Blending Mode"),
(view! { <BookmarkIcon/> }.into_any(), "Bookmark"),
(view! { <BookmarkFilledIcon/> }.into_any(), "Bookmark Filled"),
(view! { <BorderAllIcon/> }.into_any(), "Border All"),
(view! { <BorderBottomIcon/> }.into_any(), "Border Bottom"),
(view! { <BorderDashedIcon/> }.into_any(), "Border Dashed"),
(view! { <BorderDottedIcon/> }.into_any(), "Border Dotted"),
(view! { <BorderLeftIcon/> }.into_any(), "Border Left"),
(view! { <BorderNoneIcon/> }.into_any(), "Border None"),
(view! { <BorderRightIcon/> }.into_any(), "Border Right"),
(view! { <BorderSolidIcon/> }.into_any(), "Border Solid"),
(view! { <BorderSplitIcon/> }.into_any(), "Border Split"),
(view! { <BorderStyleIcon/> }.into_any(), "Border Style"),
(view! { <BorderTopIcon/> }.into_any(), "Border Top"),
(view! { <BorderWidthIcon/> }.into_any(), "Border Width"),
(view! { <BoxIcon/> }.into_any(), "Box"),
(view! { <BoxModelIcon/> }.into_any(), "Box Model"),
(view! { <ButtonIcon/> }.into_any(), "Button"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsC() -> impl IntoView {
view! {
<For
each=move || [
(view! { <CalendarIcon/> }.into_any(), "Calendar"),
(view! { <CameraIcon/> }.into_any(), "Camera"),
(view! { <CardStackIcon/> }.into_any(), "Card Stack"),
(view! { <CardStackMinusIcon/> }.into_any(), "Card Stack Minus"),
(view! { <CardStackPlusIcon/> }.into_any(), "Card Stack Plus"),
(view! { <CaretDownIcon/> }.into_any(), "Caret Down"),
(view! { <CaretLeftIcon/> }.into_any(), "Caret Left"),
(view! { <CaretRightIcon/> }.into_any(), "Caret Right"),
(view! { <CaretSortIcon/> }.into_any(), "Caret Sort"),
(view! { <CaretUpIcon/> }.into_any(), "Caret Up"),
(view! { <ChatBubbleIcon/> }.into_any(), "Chat Bubble"),
(view! { <CheckIcon/> }.into_any(), "Check"),
(view! { <CheckCircledIcon/> }.into_any(), "Check Circled"),
(view! { <CheckboxIcon/> }.into_any(), "Checkbox"),
(view! { <ChevronDownIcon/> }.into_any(), "Chevron Down"),
(view! { <ChevronLeftIcon/> }.into_any(), "Chevron Left"),
(view! { <ChevronRightIcon/> }.into_any(), "Chevron Right"),
(view! { <ChevronUpIcon/> }.into_any(), "Chevron Up"),
(view! { <CircleIcon/> }.into_any(), "Circle"),
(view! { <CircleBackslashIcon/> }.into_any(), "Circle Backslash"),
(view! { <ClipboardIcon/> }.into_any(), "Clipboard"),
(view! { <ClipboardCopyIcon/> }.into_any(), "Clipboard Copy"),
(view! { <ClockIcon/> }.into_any(), "Clock"),
(view! { <CodeIcon/> }.into_any(), "Code"),
(view! { <CodesandboxLogoIcon/> }.into_any(), "Codesandbox Logo"),
(view! { <ColorWheelIcon/> }.into_any(), "Color Wheel"),
(view! { <ColumnSpacingIcon/> }.into_any(), "Column Spacing"),
(view! { <ColumnsIcon/> }.into_any(), "Columns"),
(view! { <CommitIcon/> }.into_any(), "Commit"),
(view! { <Component1Icon/> }.into_any(), "Component 1"),
(view! { <Component2Icon/> }.into_any(), "Component 2"),
(view! { <ComponentBooleanIcon/> }.into_any(), "Component Boolean"),
(view! { <ComponentInstanceIcon/> }.into_any(), "Component Instance"),
(view! { <ComponentNoneIcon/> }.into_any(), "Component None"),
(view! { <ComponentPlaceholderIcon/> }.into_any(), "Component Placeholder"),
(view! { <ContainerIcon/> }.into_any(), "Container"),
(view! { <CookieIcon/> }.into_any(), "Cookie"),
(view! { <CopyIcon/> }.into_any(), "Copy"),
(view! { <CornerBottomLeftIcon/> }.into_any(), "Corner Bottom Left"),
(view! { <CornerBottomRightIcon/> }.into_any(), "Corner Bottom Right"),
(view! { <CornerTopLeftIcon/> }.into_any(), "Corner Top Left"),
(view! { <CornerTopRightIcon/> }.into_any(), "Corner Top Right"),
(view! { <CornersIcon/> }.into_any(), "Corners"),
(view! { <CountdownTimerIcon/> }.into_any(), "Countdown Timer"),
(view! { <CounterClockwiseClockIcon/> }.into_any(), "Counter Clockwise Clock"),
(view! { <CropIcon/> }.into_any(), "Crop"),
(view! { <Cross1Icon/> }.into_any(), "Cross 1"),
(view! { <Cross2Icon/> }.into_any(), "Cross 2"),
(view! { <CrossCircledIcon/> }.into_any(), "Cross Circled"),
(view! { <Crosshair1Icon/> }.into_any(), "Crosshair 1"),
(view! { <Crosshair2Icon/> }.into_any(), "Crosshair 2"),
(view! { <CrumpledPaperIcon/> }.into_any(), "Crumpled Paper"),
(view! { <CubeIcon/> }.into_any(), "Cube"),
(view! { <CursorArrowIcon/> }.into_any(), "Cursor Arrow"),
(view! { <CursorTextIcon/> }.into_any(), "Cursor Text"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsD() -> impl IntoView {
view! {
<For
each=move || [
(view! { <DashIcon/> }.into_any(), "Dash"),
(view! { <DashboardIcon/> }.into_any(), "Dashboard"),
(view! { <DesktopIcon/> }.into_any(), "Desktop"),
(view! { <DimensionsIcon/> }.into_any(), "Dimensions"),
(view! { <DiscIcon/> }.into_any(), "Disc"),
(view! { <DiscordLogoIcon/> }.into_any(), "Discord Logo"),
(view! { <DividerHorizontalIcon/> }.into_any(), "Divider Horizontal"),
(view! { <DividerVerticalIcon/> }.into_any(), "Divider Vertical"),
(view! { <DotIcon/> }.into_any(), "Dot"),
(view! { <DotFilledIcon/> }.into_any(), "Dot Filled"),
(view! { <DotsHorizontalIcon/> }.into_any(), "Dots Horizontal"),
(view! { <DotsVerticalIcon/> }.into_any(), "Dots Vertical"),
(view! { <DoubleArrowDownIcon/> }.into_any(), "Double Arrow Down"),
(view! { <DoubleArrowLeftIcon/> }.into_any(), "Double Arrow Left"),
(view! { <DoubleArrowRightIcon/> }.into_any(), "Double Arrow Right"),
(view! { <DoubleArrowUpIcon/> }.into_any(), "Double Arrow Up"),
(view! { <DownloadIcon/> }.into_any(), "Download"),
(view! { <DragHandleDots1Icon/> }.into_any(), "Drag Handle Dots 1"),
(view! { <DragHandleDots2Icon/> }.into_any(), "Drag Handle Dots 2"),
(view! { <DragHandleHorizontalIcon/> }.into_any(), "Drag Handle Horizontal"),
(view! { <DragHandleVerticalIcon/> }.into_any(), "Drag Handle Vertical"),
(view! { <DrawingPinIcon/> }.into_any(), "Drawing Pin"),
(view! { <DrawingPinFilledIcon/> }.into_any(), "Drawing Pin Filled"),
(view! { <DropdownMenuIcon/> }.into_any(), "Dropdown Menu"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsE() -> impl IntoView {
view! {
<For
each=move || [
(view! { <EnterIcon/> }.into_any(), "Enter"),
(view! { <EnterFullScreenIcon/> }.into_any(), "Enter Full Screen"),
(view! { <EnvelopeClosedIcon/> }.into_any(), "Envelope Closed"),
(view! { <EnvelopeOpenIcon/> }.into_any(), "Envelope Open"),
(view! { <EraserIcon/> }.into_any(), "Eraser"),
(view! { <ExclamationTriangleIcon/> }.into_any(), "Exclamation Triangle"),
(view! { <ExitIcon/> }.into_any(), "Exit"),
(view! { <ExitFullScreenIcon/> }.into_any(), "Exit Full Screen"),
(view! { <ExternalLinkIcon/> }.into_any(), "External Link"),
(view! { <EyeClosedIcon/> }.into_any(), "Eye Closed"),
(view! { <EyeNoneIcon/> }.into_any(), "Eye None"),
(view! { <EyeOpenIcon/> }.into_any(), "Eye Open"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsF() -> impl IntoView {
view! {
<For
each=move || [
(view! { <FaceIcon/> }.into_any(), "Face"),
(view! { <FigmaLogoIcon/> }.into_any(), "Figma Logo"),
(view! { <FileIcon/> }.into_any(), "File"),
(view! { <FileMinusIcon/> }.into_any(), "File Minus"),
(view! { <FilePlusIcon/> }.into_any(), "File Plus"),
(view! { <FileTextIcon/> }.into_any(), "File Text"),
(view! { <FontBoldIcon/> }.into_any(), "Font Bold"),
(view! { <FontFamilyIcon/> }.into_any(), "Font Family"),
(view! { <FontItalicIcon/> }.into_any(), "Font Italic"),
(view! { <FontRomanIcon/> }.into_any(), "Font Roman"),
(view! { <FontSizeIcon/> }.into_any(), "Font Size"),
(view! { <FontStyleIcon/> }.into_any(), "Font Style"),
(view! { <FrameIcon/> }.into_any(), "Frame"),
(view! { <FramerLogoIcon/> }.into_any(), "Framer Logo"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsG() -> impl IntoView {
view! {
<For
each=move || [
(view! { <GearIcon/> }.into_any(), "Gear"),
(view! { <GithubLogoIcon/> }.into_any(), "Github Logo"),
(view! { <GlobeIcon/> }.into_any(), "Globe"),
(view! { <GridIcon/> }.into_any(), "Grid"),
(view! { <GroupIcon/> }.into_any(), "Group"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsH() -> impl IntoView {
view! {
<For
each=move || [
(view! { <Half1Icon/> }.into_any(), "Half 1"),
(view! { <Half2Icon/> }.into_any(), "Half 2"),
(view! { <HamburgerMenuIcon/> }.into_any(), "Hamburger Menu"),
(view! { <HandIcon/> }.into_any(), "Hand"),
(view! { <HeadingIcon/> }.into_any(), "Heading"),
(view! { <HeartIcon/> }.into_any(), "Heart"),
(view! { <HeartFilledIcon/> }.into_any(), "Heart Filled"),
(view! { <HeightIcon/> }.into_any(), "Height"),
(view! { <HobbyKnifeIcon/> }.into_any(), "Hobby Knife"),
(view! { <HomeIcon/> }.into_any(), "Home"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsI() -> impl IntoView {
view! {
<For
each=move || [
(view! { <IconjarLogoIcon/> }.into_any(), "Iconjar Logo"),
(view! { <IdCardIcon/> }.into_any(), "Id Card"),
(view! { <ImageIcon/> }.into_any(), "Image"),
(view! { <InfoCircledIcon/> }.into_any(), "Info Circled"),
(view! { <InputIcon/> }.into_any(), "Input"),
(view! { <InstagramLogoIcon/> }.into_any(), "Instagram Logo"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsK() -> impl IntoView {
view! {
<For
each=move || [(view! { <KeyboardIcon/> }.into_any(), "Keyboard")]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsL() -> impl IntoView {
view! {
<For
each=move || [
(view! { <LapTimerIcon/> }.into_any(), "Lap Timer"),
(view! { <LaptopIcon/> }.into_any(), "Laptop"),
(view! { <LayersIcon/> }.into_any(), "Layers"),
(view! { <LayoutIcon/> }.into_any(), "Layout"),
(view! { <LetterCaseCapitalizeIcon/> }.into_any(), "Letter Case Capitalize"),
(view! { <LetterCaseLowercaseIcon/> }.into_any(), "Letter Case Lowercase"),
(view! { <LetterCaseToggleIcon/> }.into_any(), "Letter Case Toggle"),
(view! { <LetterCaseUppercaseIcon/> }.into_any(), "Letter Case Uppercase"),
(view! { <LetterSpacingIcon/> }.into_any(), "Letter Spacing"),
(view! { <LightningBoltIcon/> }.into_any(), "Lightning Bolt"),
(view! { <LineHeightIcon/> }.into_any(), "Line Height"),
(view! { <Link1Icon/> }.into_any(), "Link 1"),
(view! { <Link2Icon/> }.into_any(), "Link 2"),
(view! { <LinkBreak1Icon/> }.into_any(), "Link Break 1"),
(view! { <LinkBreak2Icon/> }.into_any(), "Link Break 2"),
(view! { <LinkNone1Icon/> }.into_any(), "Link None 1"),
(view! { <LinkNone2Icon/> }.into_any(), "Link None 2"),
(view! { <LinkedinLogoIcon/> }.into_any(), "Linkedin Logo"),
(view! { <ListBulletIcon/> }.into_any(), "List Bullet"),
(view! { <LockClosedIcon/> }.into_any(), "Lock Closed"),
(view! { <LockOpen1Icon/> }.into_any(), "Lock Open 1"),
(view! { <LockOpen2Icon/> }.into_any(), "Lock Open 2"),
(view! { <LoopIcon/> }.into_any(), "Loop"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsM() -> impl IntoView {
view! {
<For
each=move || [
(view! { <MagicWandIcon/> }.into_any(), "Magic Wand"),
(view! { <MagnifyingGlassIcon/> }.into_any(), "Magnifying Glass"),
(view! { <MarginIcon/> }.into_any(), "Margin"),
(view! { <MaskOffIcon/> }.into_any(), "Mask Off"),
(view! { <MaskOnIcon/> }.into_any(), "Mask On"),
(view! { <MinusIcon/> }.into_any(), "Minus"),
(view! { <MinusCircledIcon/> }.into_any(), "Minus Circled"),
(view! { <MixIcon/> }.into_any(), "Mix"),
(view! { <MixerHorizontalIcon/> }.into_any(), "Mixer Horizontal"),
(view! { <MixerVerticalIcon/> }.into_any(), "Mixer Vertical"),
(view! { <MobileIcon/> }.into_any(), "Mobile"),
(view! { <ModulzLogoIcon/> }.into_any(), "Modulz Logo"),
(view! { <MoonIcon/> }.into_any(), "Moon"),
(view! { <MoveIcon/> }.into_any(), "Move"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsN() -> impl IntoView {
view! {
<For
each=move || [(view! { <NotionLogoIcon/> }.into_any(), "Notion Logo")]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsO() -> impl IntoView {
view! {
<For
each=move || [
(view! { <OpacityIcon/> }.into_any(), "Opacity"),
(view! { <OpenInNewWindowIcon/> }.into_any(), "Open In New Window"),
(view! { <OverlineIcon/> }.into_any(), "Overline"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsP() -> impl IntoView {
view! {
<For
each=move || [
(view! { <PaddingIcon/> }.into_any(), "Padding"),
(view! { <PaperPlaneIcon/> }.into_any(), "Paper Plane"),
(view! { <PauseIcon/> }.into_any(), "Pause"),
(view! { <Pencil1Icon/> }.into_any(), "Pencil 1"),
(view! { <Pencil2Icon/> }.into_any(), "Pencil 2"),
(view! { <PersonIcon/> }.into_any(), "Person"),
(view! { <PieChartIcon/> }.into_any(), "Pie Chart"),
(view! { <PilcrowIcon/> }.into_any(), "Pilcrow"),
(view! { <PinBottomIcon/> }.into_any(), "Pin Bottom"),
(view! { <PinLeftIcon/> }.into_any(), "Pin Left"),
(view! { <PinRightIcon/> }.into_any(), "Pin Right"),
(view! { <PinTopIcon/> }.into_any(), "Pin Top"),
(view! { <PlayIcon/> }.into_any(), "Play"),
(view! { <PlusIcon/> }.into_any(), "Plus"),
(view! { <PlusCircledIcon/> }.into_any(), "Plus Circled"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsQ() -> impl IntoView {
view! {
<For
each=move || [
(view! { <QuestionMarkIcon/> }.into_any(), "Question Mark"),
(view! { <QuestionMarkCircledIcon/> }.into_any(), "Question Mark Circled"),
(view! { <QuoteIcon/> }.into_any(), "Quote"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsR() -> impl IntoView {
view! {
<For
each=move || [
(view! { <RadiobuttonIcon/> }.into_any(), "Radiobutton"),
(view! { <ReaderIcon/> }.into_any(), "Reader"),
(view! { <ReloadIcon/> }.into_any(), "Reload"),
(view! { <ResetIcon/> }.into_any(), "Reset"),
(view! { <ResumeIcon/> }.into_any(), "Resume"),
(view! { <RocketIcon/> }.into_any(), "Rocket"),
(view! { <RotateCounterClockwiseIcon/> }.into_any(), "Rotate Counter Clockwise"),
(view! { <RowSpacingIcon/> }.into_any(), "Row Spacing"),
(view! { <RowsIcon/> }.into_any(), "Rows"),
(view! { <RulerHorizontalIcon/> }.into_any(), "Ruler Horizontal"),
(view! { <RulerSquareIcon/> }.into_any(), "Ruler Square"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsS() -> impl IntoView {
view! {
<For
each=move || [
(view! { <ScissorsIcon/> }.into_any(), "Scissors"),
(view! { <SectionIcon/> }.into_any(), "Section"),
(view! { <SewingPinIcon/> }.into_any(), "Sewing Pin"),
(view! { <SewingPinFilledIcon/> }.into_any(), "Sewing Pin Filled"),
(view! { <ShadowIcon/> }.into_any(), "Shadow"),
(view! { <ShadowInnerIcon/> }.into_any(), "Shadow Inner"),
(view! { <ShadowNoneIcon/> }.into_any(), "Shadow None"),
(view! { <ShadowOuterIcon/> }.into_any(), "Shadow Outer"),
(view! { <Share1Icon/> }.into_any(), "Share 1"),
(view! { <Share2Icon/> }.into_any(), "Share 2"),
(view! { <ShuffleIcon/> }.into_any(), "Shuffle"),
(view! { <SizeIcon/> }.into_any(), "Size"),
(view! { <SketchLogoIcon/> }.into_any(), "Sketch Logo"),
(view! { <SlashIcon/> }.into_any(), "Slash"),
(view! { <SliderIcon/> }.into_any(), "Slider"),
(
view! { <SpaceBetweenHorizontallyIcon/> }.into_any(),
"Space Between Horizontally",
),
(view! { <SpaceBetweenVerticallyIcon/> }.into_any(), "Space Between Vertically"),
(view! { <SpaceEvenlyHorizontallyIcon/> }.into_any(), "Space Evenly Horizontally"),
(view! { <SpaceEvenlyVerticallyIcon/> }.into_any(), "Space Evenly Vertically"),
(view! { <SpeakerLoudIcon/> }.into_any(), "Speaker Loud"),
(view! { <SpeakerModerateIcon/> }.into_any(), "Speaker Moderate"),
(view! { <SpeakerOffIcon/> }.into_any(), "Speaker Off"),
(view! { <SpeakerQuietIcon/> }.into_any(), "Speaker Quiet"),
(view! { <SquareIcon/> }.into_any(), "Square"),
(view! { <StackIcon/> }.into_any(), "Stack"),
(view! { <StarIcon/> }.into_any(), "Star"),
(view! { <StarFilledIcon/> }.into_any(), "Star Filled"),
(view! { <StitchesLogoIcon/> }.into_any(), "Stitches Logo"),
(view! { <StopIcon/> }.into_any(), "Stop"),
(view! { <StopwatchIcon/> }.into_any(), "Stopwatch"),
(view! { <StretchHorizontallyIcon/> }.into_any(), "Stretch Horizontally"),
(view! { <StretchVerticallyIcon/> }.into_any(), "Stretch Vertically"),
(view! { <StrikethroughIcon/> }.into_any(), "Strikethrough"),
(view! { <SunIcon/> }.into_any(), "Sun"),
(view! { <SwitchIcon/> }.into_any(), "Switch"),
(view! { <SymbolIcon/> }.into_any(), "Symbol"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsT() -> impl IntoView {
view! {
<For
each=move || [
(view! { <TableIcon/> }.into_any(), "Table"),
(view! { <TargetIcon/> }.into_any(), "Target"),
(view! { <TextIcon/> }.into_any(), "Text"),
(view! { <TextAlignBottomIcon/> }.into_any(), "Text Align Bottom"),
(view! { <TextAlignCenterIcon/> }.into_any(), "Text Align Center"),
(view! { <TextAlignJustifyIcon/> }.into_any(), "Text Align Justify"),
(view! { <TextAlignLeftIcon/> }.into_any(), "Text Align Left"),
(view! { <TextAlignMiddleIcon/> }.into_any(), "Text Align Middle"),
(view! { <TextAlignRightIcon/> }.into_any(), "Text Align Right"),
(view! { <TextAlignTopIcon/> }.into_any(), "Text Align Top"),
(view! { <TextNoneIcon/> }.into_any(), "Text None"),
(view! { <ThickArrowDownIcon/> }.into_any(), "Thick Arrow Down"),
(view! { <ThickArrowLeftIcon/> }.into_any(), "Thick Arrow Left"),
(view! { <ThickArrowRightIcon/> }.into_any(), "Thick Arrow Right"),
(view! { <ThickArrowUpIcon/> }.into_any(), "Thick Arrow Up"),
(view! { <TimerIcon/> }.into_any(), "Timer"),
(view! { <TokensIcon/> }.into_any(), "Tokens"),
(view! { <TrackNextIcon/> }.into_any(), "Track Next"),
(view! { <TrackPreviousIcon/> }.into_any(), "Track Previous"),
(view! { <TransformIcon/> }.into_any(), "Transform"),
(view! { <TransparencyGridIcon/> }.into_any(), "Transparency Grid"),
(view! { <TrashIcon/> }.into_any(), "Trash"),
(view! { <TriangleDownIcon/> }.into_any(), "Triangle Down"),
(view! { <TriangleLeftIcon/> }.into_any(), "Triangle Left"),
(view! { <TriangleRightIcon/> }.into_any(), "Triangle Right"),
(view! { <TriangleUpIcon/> }.into_any(), "Triangle Up"),
(view! { <TwitterLogoIcon/> }.into_any(), "Twitter Logo"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsU() -> impl IntoView {
view! {
<For
each=move || [
(view! { <UnderlineIcon/> }.into_any(), "Underline"),
(view! { <UpdateIcon/> }.into_any(), "Update"),
(view! { <UploadIcon/> }.into_any(), "Upload"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsV() -> impl IntoView {
view! {
<For
each=move || [
(view! { <ValueIcon/> }.into_any(), "Value"),
(view! { <ValueNoneIcon/> }.into_any(), "Value None"),
(view! { <VercelLogoIcon/> }.into_any(), "Vercel Logo"),
(view! { <VideoIcon/> }.into_any(), "Video"),
(view! { <ViewGridIcon/> }.into_any(), "View Grid"),
(view! { <ViewHorizontalIcon/> }.into_any(), "View Horizontal"),
(view! { <ViewNoneIcon/> }.into_any(), "View None"),
(view! { <ViewVerticalIcon/> }.into_any(), "View Vertical"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsW() -> impl IntoView {
view! {
<For
each=move || [(view! { <WidthIcon/> }.into_any(), "Width")]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
#[component]
pub fn IconsZ() -> impl IntoView {
view! {
<For
each=move || [
(view! { <ZoomInIcon/> }.into_any(), "Zoom In"),
(view! { <ZoomOutIcon/> }.into_any(), "Zoom Out"),
]
key=|icon| icon.1
children=move |(icon, name)| {
view! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{icon} <span>{name}</span>
</div>
}
}
/>
}
}
use radix_yew_icons::*;
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 />
<IconsK />
<IconsL />
<IconsM />
<IconsN />
<IconsO />
<IconsP />
<IconsQ />
<IconsR />
<IconsS />
<IconsT />
<IconsU />
<IconsV />
<IconsW />
<IconsZ />
</div>
}
}
#[function_component]
pub fn IconsA() -> Html {
let icons = [
(html! { <AccessibilityIcon /> }, "Accessibility"),
(html! { <ActivityLogIcon /> }, "Activity Log"),
(html! { <AlignBaselineIcon /> }, "Align Baseline"),
(html! { <AlignBottomIcon /> }, "Align Bottom"),
(
html! { <AlignCenterHorizontallyIcon /> },
"Align Center Horizontally",
),
(
html! { <AlignCenterVerticallyIcon /> },
"Align Center Vertically",
),
(html! { <AlignLeftIcon /> }, "Align Left"),
(html! { <AlignRightIcon /> }, "Align Right"),
(html! { <AlignTopIcon /> }, "Align Top"),
(html! { <AllSidesIcon /> }, "All Sides"),
(html! { <AngleIcon /> }, "Angle"),
(html! { <ArchiveIcon /> }, "Archive"),
(html! { <ArrowBottomLeftIcon /> }, "Arrow Bottom Left"),
(html! { <ArrowBottomRightIcon /> }, "Arrow Bottom Right"),
(html! { <ArrowDownIcon /> }, "Arrow Down"),
(html! { <ArrowLeftIcon /> }, "Arrow Left"),
(html! { <ArrowRightIcon /> }, "Arrow Right"),
(html! { <ArrowTopLeftIcon /> }, "Arrow Top Left"),
(html! { <ArrowTopRightIcon /> }, "Arrow Top Right"),
(html! { <ArrowUpIcon /> }, "Arrow Up"),
(html! { <AspectRatioIcon /> }, "Aspect Ratio"),
(html! { <AvatarIcon /> }, "Avatar"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsB() -> Html {
let icons = [
(html! { <BackpackIcon /> }, "Backpack"),
(html! { <BadgeIcon /> }, "Badge"),
(html! { <BarChartIcon /> }, "Bar Chart"),
(html! { <BellIcon /> }, "Bell"),
(html! { <BlendingModeIcon /> }, "Blending Mode"),
(html! { <BookmarkIcon /> }, "Bookmark"),
(html! { <BookmarkFilledIcon /> }, "Bookmark Filled"),
(html! { <BorderAllIcon /> }, "Border All"),
(html! { <BorderBottomIcon /> }, "Border Bottom"),
(html! { <BorderDashedIcon /> }, "Border Dashed"),
(html! { <BorderDottedIcon /> }, "Border Dotted"),
(html! { <BorderLeftIcon /> }, "Border Left"),
(html! { <BorderNoneIcon /> }, "Border None"),
(html! { <BorderRightIcon /> }, "Border Right"),
(html! { <BorderSolidIcon /> }, "Border Solid"),
(html! { <BorderSplitIcon /> }, "Border Split"),
(html! { <BorderStyleIcon /> }, "Border Style"),
(html! { <BorderTopIcon /> }, "Border Top"),
(html! { <BorderWidthIcon /> }, "Border Width"),
(html! { <BoxIcon /> }, "Box"),
(html! { <BoxModelIcon /> }, "Box Model"),
(html! { <ButtonIcon /> }, "Button"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsC() -> Html {
let icons = [
(html! { <CalendarIcon /> }, "Calendar"),
(html! { <CameraIcon /> }, "Camera"),
(html! { <CardStackIcon /> }, "Card Stack"),
(html! { <CardStackMinusIcon /> }, "Card Stack Minus"),
(html! { <CardStackPlusIcon /> }, "Card Stack Plus"),
(html! { <CaretDownIcon /> }, "Caret Down"),
(html! { <CaretLeftIcon /> }, "Caret Left"),
(html! { <CaretRightIcon /> }, "Caret Right"),
(html! { <CaretSortIcon /> }, "Caret Sort"),
(html! { <CaretUpIcon /> }, "Caret Up"),
(html! { <ChatBubbleIcon /> }, "Chat Bubble"),
(html! { <CheckIcon /> }, "Check"),
(html! { <CheckCircledIcon /> }, "Check Circled"),
(html! { <CheckboxIcon /> }, "Checkbox"),
(html! { <ChevronDownIcon /> }, "Chevron Down"),
(html! { <ChevronLeftIcon /> }, "Chevron Left"),
(html! { <ChevronRightIcon /> }, "Chevron Right"),
(html! { <ChevronUpIcon /> }, "Chevron Up"),
(html! { <CircleIcon /> }, "Circle"),
(html! { <CircleBackslashIcon /> }, "Circle Backslash"),
(html! { <ClipboardIcon /> }, "Clipboard"),
(html! { <ClipboardCopyIcon /> }, "Clipboard Copy"),
(html! { <ClockIcon /> }, "Clock"),
(html! { <CodeIcon /> }, "Code"),
(html! { <CodesandboxLogoIcon /> }, "Codesandbox Logo"),
(html! { <ColorWheelIcon /> }, "Color Wheel"),
(html! { <ColumnSpacingIcon /> }, "Column Spacing"),
(html! { <ColumnsIcon /> }, "Columns"),
(html! { <CommitIcon /> }, "Commit"),
(html! { <Component1Icon /> }, "Component 1"),
(html! { <Component2Icon /> }, "Component 2"),
(html! { <ComponentBooleanIcon /> }, "Component Boolean"),
(html! { <ComponentInstanceIcon /> }, "Component Instance"),
(html! { <ComponentNoneIcon /> }, "Component None"),
(
html! { <ComponentPlaceholderIcon /> },
"Component Placeholder",
),
(html! { <ContainerIcon /> }, "Container"),
(html! { <CookieIcon /> }, "Cookie"),
(html! { <CopyIcon /> }, "Copy"),
(html! { <CornerBottomLeftIcon /> }, "Corner Bottom Left"),
(html! { <CornerBottomRightIcon /> }, "Corner Bottom Right"),
(html! { <CornerTopLeftIcon /> }, "Corner Top Left"),
(html! { <CornerTopRightIcon /> }, "Corner Top Right"),
(html! { <CornersIcon /> }, "Corners"),
(html! { <CountdownTimerIcon /> }, "Countdown Timer"),
(
html! { <CounterClockwiseClockIcon /> },
"Counter Clockwise Clock",
),
(html! { <CropIcon /> }, "Crop"),
(html! { <Cross1Icon /> }, "Cross 1"),
(html! { <Cross2Icon /> }, "Cross 2"),
(html! { <CrossCircledIcon /> }, "Cross Circled"),
(html! { <Crosshair1Icon /> }, "Crosshair 1"),
(html! { <Crosshair2Icon /> }, "Crosshair 2"),
(html! { <CrumpledPaperIcon /> }, "Crumpled Paper"),
(html! { <CubeIcon /> }, "Cube"),
(html! { <CursorArrowIcon /> }, "Cursor Arrow"),
(html! { <CursorTextIcon /> }, "Cursor Text"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsD() -> Html {
let icons = [
(html! { <DashIcon /> }, "Dash"),
(html! { <DashboardIcon /> }, "Dashboard"),
(html! { <DesktopIcon /> }, "Desktop"),
(html! { <DimensionsIcon /> }, "Dimensions"),
(html! { <DiscIcon /> }, "Disc"),
(html! { <DiscordLogoIcon /> }, "Discord Logo"),
(html! { <DividerHorizontalIcon /> }, "Divider Horizontal"),
(html! { <DividerVerticalIcon /> }, "Divider Vertical"),
(html! { <DotIcon /> }, "Dot"),
(html! { <DotFilledIcon /> }, "Dot Filled"),
(html! { <DotsHorizontalIcon /> }, "Dots Horizontal"),
(html! { <DotsVerticalIcon /> }, "Dots Vertical"),
(html! { <DoubleArrowDownIcon /> }, "Double Arrow Down"),
(html! { <DoubleArrowLeftIcon /> }, "Double Arrow Left"),
(html! { <DoubleArrowRightIcon /> }, "Double Arrow Right"),
(html! { <DoubleArrowUpIcon /> }, "Double Arrow Up"),
(html! { <DownloadIcon /> }, "Download"),
(html! { <DragHandleDots1Icon /> }, "Drag Handle Dots 1"),
(html! { <DragHandleDots2Icon /> }, "Drag Handle Dots 2"),
(
html! { <DragHandleHorizontalIcon /> },
"Drag Handle Horizontal",
),
(html! { <DragHandleVerticalIcon /> }, "Drag Handle Vertical"),
(html! { <DrawingPinIcon /> }, "Drawing Pin"),
(html! { <DrawingPinFilledIcon /> }, "Drawing Pin Filled"),
(html! { <DropdownMenuIcon /> }, "Dropdown Menu"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsE() -> Html {
let icons = [
(html! { <EnterIcon /> }, "Enter"),
(html! { <EnterFullScreenIcon /> }, "Enter Full Screen"),
(html! { <EnvelopeClosedIcon /> }, "Envelope Closed"),
(html! { <EnvelopeOpenIcon /> }, "Envelope Open"),
(html! { <EraserIcon /> }, "Eraser"),
(
html! { <ExclamationTriangleIcon /> },
"Exclamation Triangle",
),
(html! { <ExitIcon /> }, "Exit"),
(html! { <ExitFullScreenIcon /> }, "Exit Full Screen"),
(html! { <ExternalLinkIcon /> }, "External Link"),
(html! { <EyeClosedIcon /> }, "Eye Closed"),
(html! { <EyeNoneIcon /> }, "Eye None"),
(html! { <EyeOpenIcon /> }, "Eye Open"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsF() -> Html {
let icons = [
(html! { <FaceIcon /> }, "Face"),
(html! { <FigmaLogoIcon /> }, "Figma Logo"),
(html! { <FileIcon /> }, "File"),
(html! { <FileMinusIcon /> }, "File Minus"),
(html! { <FilePlusIcon /> }, "File Plus"),
(html! { <FileTextIcon /> }, "File Text"),
(html! { <FontBoldIcon /> }, "Font Bold"),
(html! { <FontFamilyIcon /> }, "Font Family"),
(html! { <FontItalicIcon /> }, "Font Italic"),
(html! { <FontRomanIcon /> }, "Font Roman"),
(html! { <FontSizeIcon /> }, "Font Size"),
(html! { <FontStyleIcon /> }, "Font Style"),
(html! { <FrameIcon /> }, "Frame"),
(html! { <FramerLogoIcon /> }, "Framer Logo"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsG() -> Html {
let icons = [
(html! { <GearIcon /> }, "Gear"),
(html! { <GithubLogoIcon /> }, "Github Logo"),
(html! { <GlobeIcon /> }, "Globe"),
(html! { <GridIcon /> }, "Grid"),
(html! { <GroupIcon /> }, "Group"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsH() -> Html {
let icons = [
(html! { <Half1Icon /> }, "Half 1"),
(html! { <Half2Icon /> }, "Half 2"),
(html! { <HamburgerMenuIcon /> }, "Hamburger Menu"),
(html! { <HandIcon /> }, "Hand"),
(html! { <HeadingIcon /> }, "Heading"),
(html! { <HeartIcon /> }, "Heart"),
(html! { <HeartFilledIcon /> }, "Heart Filled"),
(html! { <HeightIcon /> }, "Height"),
(html! { <HobbyKnifeIcon /> }, "Hobby Knife"),
(html! { <HomeIcon /> }, "Home"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsI() -> Html {
let icons = [
(html! { <IconjarLogoIcon /> }, "Iconjar Logo"),
(html! { <IdCardIcon /> }, "Id Card"),
(html! { <ImageIcon /> }, "Image"),
(html! { <InfoCircledIcon /> }, "Info Circled"),
(html! { <InputIcon /> }, "Input"),
(html! { <InstagramLogoIcon /> }, "Instagram Logo"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsK() -> Html {
let icons = [(html! { <KeyboardIcon /> }, "Keyboard")];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsL() -> Html {
let icons = [
(html! { <LapTimerIcon /> }, "Lap Timer"),
(html! { <LaptopIcon /> }, "Laptop"),
(html! { <LayersIcon /> }, "Layers"),
(html! { <LayoutIcon /> }, "Layout"),
(
html! { <LetterCaseCapitalizeIcon /> },
"Letter Case Capitalize",
),
(
html! { <LetterCaseLowercaseIcon /> },
"Letter Case Lowercase",
),
(html! { <LetterCaseToggleIcon /> }, "Letter Case Toggle"),
(
html! { <LetterCaseUppercaseIcon /> },
"Letter Case Uppercase",
),
(html! { <LetterSpacingIcon /> }, "Letter Spacing"),
(html! { <LightningBoltIcon /> }, "Lightning Bolt"),
(html! { <LineHeightIcon /> }, "Line Height"),
(html! { <Link1Icon /> }, "Link 1"),
(html! { <Link2Icon /> }, "Link 2"),
(html! { <LinkBreak1Icon /> }, "Link Break 1"),
(html! { <LinkBreak2Icon /> }, "Link Break 2"),
(html! { <LinkNone1Icon /> }, "Link None 1"),
(html! { <LinkNone2Icon /> }, "Link None 2"),
(html! { <LinkedinLogoIcon /> }, "Linkedin Logo"),
(html! { <ListBulletIcon /> }, "List Bullet"),
(html! { <LockClosedIcon /> }, "Lock Closed"),
(html! { <LockOpen1Icon /> }, "Lock Open 1"),
(html! { <LockOpen2Icon /> }, "Lock Open 2"),
(html! { <LoopIcon /> }, "Loop"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsM() -> Html {
let icons = [
(html! { <MagicWandIcon /> }, "Magic Wand"),
(html! { <MagnifyingGlassIcon /> }, "Magnifying Glass"),
(html! { <MarginIcon /> }, "Margin"),
(html! { <MaskOffIcon /> }, "Mask Off"),
(html! { <MaskOnIcon /> }, "Mask On"),
(html! { <MinusIcon /> }, "Minus"),
(html! { <MinusCircledIcon /> }, "Minus Circled"),
(html! { <MixIcon /> }, "Mix"),
(html! { <MixerHorizontalIcon /> }, "Mixer Horizontal"),
(html! { <MixerVerticalIcon /> }, "Mixer Vertical"),
(html! { <MobileIcon /> }, "Mobile"),
(html! { <ModulzLogoIcon /> }, "Modulz Logo"),
(html! { <MoonIcon /> }, "Moon"),
(html! { <MoveIcon /> }, "Move"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsN() -> Html {
let icons = [(html! { <NotionLogoIcon /> }, "Notion Logo")];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsO() -> Html {
let icons = [
(html! { <OpacityIcon /> }, "Opacity"),
(html! { <OpenInNewWindowIcon /> }, "Open In New Window"),
(html! { <OverlineIcon /> }, "Overline"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsP() -> Html {
let icons = [
(html! { <PaddingIcon /> }, "Padding"),
(html! { <PaperPlaneIcon /> }, "Paper Plane"),
(html! { <PauseIcon /> }, "Pause"),
(html! { <Pencil1Icon /> }, "Pencil 1"),
(html! { <Pencil2Icon /> }, "Pencil 2"),
(html! { <PersonIcon /> }, "Person"),
(html! { <PieChartIcon /> }, "Pie Chart"),
(html! { <PilcrowIcon /> }, "Pilcrow"),
(html! { <PinBottomIcon /> }, "Pin Bottom"),
(html! { <PinLeftIcon /> }, "Pin Left"),
(html! { <PinRightIcon /> }, "Pin Right"),
(html! { <PinTopIcon /> }, "Pin Top"),
(html! { <PlayIcon /> }, "Play"),
(html! { <PlusIcon /> }, "Plus"),
(html! { <PlusCircledIcon /> }, "Plus Circled"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsQ() -> Html {
let icons = [
(html! { <QuestionMarkIcon /> }, "Question Mark"),
(
html! { <QuestionMarkCircledIcon /> },
"Question Mark Circled",
),
(html! { <QuoteIcon /> }, "Quote"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsR() -> Html {
let icons = [
(html! { <RadiobuttonIcon /> }, "Radiobutton"),
(html! { <ReaderIcon /> }, "Reader"),
(html! { <ReloadIcon /> }, "Reload"),
(html! { <ResetIcon /> }, "Reset"),
(html! { <ResumeIcon /> }, "Resume"),
(html! { <RocketIcon /> }, "Rocket"),
(
html! { <RotateCounterClockwiseIcon /> },
"Rotate Counter Clockwise",
),
(html! { <RowSpacingIcon /> }, "Row Spacing"),
(html! { <RowsIcon /> }, "Rows"),
(html! { <RulerHorizontalIcon /> }, "Ruler Horizontal"),
(html! { <RulerSquareIcon /> }, "Ruler Square"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsS() -> Html {
let icons = [
(html! { <ScissorsIcon /> }, "Scissors"),
(html! { <SectionIcon /> }, "Section"),
(html! { <SewingPinIcon /> }, "Sewing Pin"),
(html! { <SewingPinFilledIcon /> }, "Sewing Pin Filled"),
(html! { <ShadowIcon /> }, "Shadow"),
(html! { <ShadowInnerIcon /> }, "Shadow Inner"),
(html! { <ShadowNoneIcon /> }, "Shadow None"),
(html! { <ShadowOuterIcon /> }, "Shadow Outer"),
(html! { <Share1Icon /> }, "Share 1"),
(html! { <Share2Icon /> }, "Share 2"),
(html! { <ShuffleIcon /> }, "Shuffle"),
(html! { <SizeIcon /> }, "Size"),
(html! { <SketchLogoIcon /> }, "Sketch Logo"),
(html! { <SlashIcon /> }, "Slash"),
(html! { <SliderIcon /> }, "Slider"),
(
html! { <SpaceBetweenHorizontallyIcon /> },
"Space Between Horizontally",
),
(
html! { <SpaceBetweenVerticallyIcon /> },
"Space Between Vertically",
),
(
html! { <SpaceEvenlyHorizontallyIcon /> },
"Space Evenly Horizontally",
),
(
html! { <SpaceEvenlyVerticallyIcon /> },
"Space Evenly Vertically",
),
(html! { <SpeakerLoudIcon /> }, "Speaker Loud"),
(html! { <SpeakerModerateIcon /> }, "Speaker Moderate"),
(html! { <SpeakerOffIcon /> }, "Speaker Off"),
(html! { <SpeakerQuietIcon /> }, "Speaker Quiet"),
(html! { <SquareIcon /> }, "Square"),
(html! { <StackIcon /> }, "Stack"),
(html! { <StarIcon /> }, "Star"),
(html! { <StarFilledIcon /> }, "Star Filled"),
(html! { <StitchesLogoIcon /> }, "Stitches Logo"),
(html! { <StopIcon /> }, "Stop"),
(html! { <StopwatchIcon /> }, "Stopwatch"),
(
html! { <StretchHorizontallyIcon /> },
"Stretch Horizontally",
),
(html! { <StretchVerticallyIcon /> }, "Stretch Vertically"),
(html! { <StrikethroughIcon /> }, "Strikethrough"),
(html! { <SunIcon /> }, "Sun"),
(html! { <SwitchIcon /> }, "Switch"),
(html! { <SymbolIcon /> }, "Symbol"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsT() -> Html {
let icons = [
(html! { <TableIcon /> }, "Table"),
(html! { <TargetIcon /> }, "Target"),
(html! { <TextIcon /> }, "Text"),
(html! { <TextAlignBottomIcon /> }, "Text Align Bottom"),
(html! { <TextAlignCenterIcon /> }, "Text Align Center"),
(html! { <TextAlignJustifyIcon /> }, "Text Align Justify"),
(html! { <TextAlignLeftIcon /> }, "Text Align Left"),
(html! { <TextAlignMiddleIcon /> }, "Text Align Middle"),
(html! { <TextAlignRightIcon /> }, "Text Align Right"),
(html! { <TextAlignTopIcon /> }, "Text Align Top"),
(html! { <TextNoneIcon /> }, "Text None"),
(html! { <ThickArrowDownIcon /> }, "Thick Arrow Down"),
(html! { <ThickArrowLeftIcon /> }, "Thick Arrow Left"),
(html! { <ThickArrowRightIcon /> }, "Thick Arrow Right"),
(html! { <ThickArrowUpIcon /> }, "Thick Arrow Up"),
(html! { <TimerIcon /> }, "Timer"),
(html! { <TokensIcon /> }, "Tokens"),
(html! { <TrackNextIcon /> }, "Track Next"),
(html! { <TrackPreviousIcon /> }, "Track Previous"),
(html! { <TransformIcon /> }, "Transform"),
(html! { <TransparencyGridIcon /> }, "Transparency Grid"),
(html! { <TrashIcon /> }, "Trash"),
(html! { <TriangleDownIcon /> }, "Triangle Down"),
(html! { <TriangleLeftIcon /> }, "Triangle Left"),
(html! { <TriangleRightIcon /> }, "Triangle Right"),
(html! { <TriangleUpIcon /> }, "Triangle Up"),
(html! { <TwitterLogoIcon /> }, "Twitter Logo"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsU() -> Html {
let icons = [
(html! { <UnderlineIcon /> }, "Underline"),
(html! { <UpdateIcon /> }, "Update"),
(html! { <UploadIcon /> }, "Upload"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsV() -> Html {
let icons = [
(html! { <ValueIcon /> }, "Value"),
(html! { <ValueNoneIcon /> }, "Value None"),
(html! { <VercelLogoIcon /> }, "Vercel Logo"),
(html! { <VideoIcon /> }, "Video"),
(html! { <ViewGridIcon /> }, "View Grid"),
(html! { <ViewHorizontalIcon /> }, "View Horizontal"),
(html! { <ViewNoneIcon /> }, "View None"),
(html! { <ViewVerticalIcon /> }, "View Vertical"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsW() -> Html {
let icons = [(html! { <WidthIcon /> }, "Width")];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
#[function_component]
pub fn IconsZ() -> Html {
let icons = [
(html! { <ZoomInIcon /> }, "Zoom In"),
(html! { <ZoomOutIcon /> }, "Zoom Out"),
];
icons
.into_iter()
.map(|(icon, name)| {
html! {
<div class="flex flex-wrap items-center gap-4 text-sm text-white">
{ icon }
<span>{ name }</span>
</div>
}
})
.collect::<Html>()
}
Installation
Install the icons from your command line.
cargo add radix-dioxus-icons
cargo add radix-leptos-icons
cargo add radix-yew-icons
Anatomy
Import the icons.
use dioxus::prelude::*;
use radix_dioxus_icons::{FaceIcon, ImageIcon, SunIcon};
#[component]
fn App() -> Element {
rsx! {
FaceIcon {}
ImageIcon {}
SunIcon {}
}
}use leptos::*;
use radix_leptos_icons::{FaceIcon, ImageIcon, SunIcon};
#[component]
fn Anatomy() -> impl IntoView {
view! {
<FaceIcon />
<SunIcon />
<ImageIcon />
}
}use yew::prelude::*;
use radix_yew_icons::{FaceIcon, ImageIcon, SunIcon};
#[function_component]
fn Anatomy() -> Html {
html! {
<>
<FaceIcon />
<SunIcon />
<ImageIcon />
</>
}
}API Reference
| Prop | Type | Default |
|---|---|---|
width | usize | 15 |
height | usize | 15 |
color | String | "currentColor" |
| Prop | Type | Default |
|---|---|---|
width | Signal<usize> | 15 |
height | Signal<usize> | 15 |
color | Signal<String> | "currentColor" |
| Prop | Type | Default |
|---|---|---|
width | usize | 15 |
height | usize | 15 |
color | AttrValue | "currentColor" |