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