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>
}
}
TODO
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" |