Icon
A collection SVG icons with automatic tree-shaking. Only icons used in your code are included in the WASM bundle.
Examples
All Available Icons
All available icons with their names
ChevronUp
ChevronDown
ChevronLeft
ChevronRight
Search
LinkExternal
Info
Mail
CopyPaste
IconLinkedIn
IconX
IconGitHub
People
Hamburger
Sidebar
Document
Data
Question
LockClosed
LockOpen
Clock
Flag
OpenDocument
Tune
Grid
DownloadFile
View Code
use leptos::prelude::*;
use mosaic_tiles::icon::*;
#[component]
pub fn AllIconsExample() -> impl IntoView {
view! {
<div class="grid grid-cols-4 gap-6">
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconChevronUp class="w-6 h-6" />
<span class="text-sm text-gray-600">"ChevronUp"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconChevronDown class="w-6 h-6" />
<span class="text-sm text-gray-600">"ChevronDown"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconChevronLeft class="w-6 h-6" />
<span class="text-sm text-gray-600">"ChevronLeft"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconChevronRight class="w-6 h-6" />
<span class="text-sm text-gray-600">"ChevronRight"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconSearch class="w-6 h-6" />
<span class="text-sm text-gray-600">"Search"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=LinkExternal class="w-6 h-6" />
<span class="text-sm text-gray-600">"LinkExternal"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Info class="w-6 h-6" />
<span class="text-sm text-gray-600">"Info"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Mail class="w-6 h-6" />
<span class="text-sm text-gray-600">"Mail"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=CopyPaste class="w-6 h-6" />
<span class="text-sm text-gray-600">"CopyPaste"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconLinkedIn class="w-6 h-6" />
<span class="text-sm text-gray-600">"IconLinkedIn"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconX class="w-6 h-6" />
<span class="text-sm text-gray-600">"IconX"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=IconGitHub class="w-6 h-6" />
<span class="text-sm text-gray-600">"IconGitHub"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=People class="w-6 h-6" />
<span class="text-sm text-gray-600">"People"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Hamburger class="w-6 h-6" />
<span class="text-sm text-gray-600">"Hamburger"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Sidebar class="w-6 h-6" />
<span class="text-sm text-gray-600">"Sidebar"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Document class="w-6 h-6" />
<span class="text-sm text-gray-600">"Document"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Data class="w-6 h-6" />
<span class="text-sm text-gray-600">"Data"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Question class="w-6 h-6" />
<span class="text-sm text-gray-600">"Question"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=LockClosed class="w-6 h-6" />
<span class="text-sm text-gray-600">"LockClosed"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=LockOpen class="w-6 h-6" />
<span class="text-sm text-gray-600">"LockOpen"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Clock class="w-6 h-6" />
<span class="text-sm text-gray-600">"Clock"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Flag class="w-6 h-6" />
<span class="text-sm text-gray-600">"Flag"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=OpenDocument class="w-6 h-6" />
<span class="text-sm text-gray-600">"OpenDocument"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Tune class="w-6 h-6" />
<span class="text-sm text-gray-600">"Tune"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=Grid class="w-6 h-6" />
<span class="text-sm text-gray-600">"Grid"</span>
</div>
<div class="flex flex-col items-center gap-2 p-4 border rounded-lg">
<Icon icon=DownloadFile class="w-6 h-6" />
<span class="text-sm text-gray-600">"DownloadFile"</span>
</div>
</div>
}
}
Sizes and Colors
Control icon size with Tailwind width/height classes and color with text color classes
Sizes
Control icon size using Tailwind width and height classes.
w-4 h-4 (16px)w-5 h-5 (20px)w-6 h-6 (24px)w-8 h-8 (32px)w-12 h-12 (48px)Colors
Icons use currentColor and inherit text color from parent or Tailwind classes.
View Code
use leptos::prelude::*;
use mosaic_tiles::icon::*;
#[component]
pub fn SizesAndColorsExample() -> impl IntoView {
view! {
<div class="space-y-8">
<div>
<h4 class="text-base font-semibold mb-3">"Sizes"</h4>
<p class="text-sm text-gray-600 mb-4">
"Control icon size using Tailwind width and height classes."
</p>
<div class="space-y-3">
<div class="flex items-center gap-4">
<Icon icon=IconSearch class="w-4 h-4" />
<code class="text-sm">"w-4 h-4 (16px)"</code>
</div>
<div class="flex items-center gap-4">
<Icon icon=IconSearch class="w-5 h-5" />
<code class="text-sm">"w-5 h-5 (20px)"</code>
</div>
<div class="flex items-center gap-4">
<Icon icon=IconSearch class="w-6 h-6" />
<code class="text-sm">"w-6 h-6 (24px)"</code>
</div>
<div class="flex items-center gap-4">
<Icon icon=IconSearch class="w-8 h-8" />
<code class="text-sm">"w-8 h-8 (32px)"</code>
</div>
<div class="flex items-center gap-4">
<Icon icon=IconSearch class="w-12 h-12" />
<code class="text-sm">"w-12 h-12 (48px)"</code>
</div>
</div>
</div>
<div>
<h4 class="text-base font-semibold mb-3">"Colors"</h4>
<p class="text-sm text-gray-600 mb-4">
"Icons use currentColor and inherit text color from parent or Tailwind classes."
</p>
<div class="flex gap-6">
<Icon icon=IconGitHub class="w-8 h-8 text-gray-500" />
<Icon icon=IconGitHub class="w-8 h-8 text-indigo-600" />
<Icon icon=IconGitHub class="w-8 h-8 text-red-500" />
<Icon icon=IconGitHub class="w-8 h-8 text-green-600" />
<Icon icon=IconGitHub class="w-8 h-8 text-purple-500" />
</div>
</div>
</div>
}
}
Real-World Usage
Icons in buttons, links, alerts, and other UI elements
View Code
use leptos::prelude::*;
use mosaic_tiles::icon::*;
#[component]
pub fn UsageExample() -> impl IntoView {
view! {
<div class="space-y-6">
<div>
<h4 class="text-base font-semibold mb-3">"Buttons"</h4>
<button class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
<Icon icon=IconSearch class="w-4 h-4" />
"Search"
</button>
</div>
<div>
<h4 class="text-base font-semibold mb-3">"Links"</h4>
<a href="#" class="inline-flex items-center gap-2 text-indigo-600 hover:underline">
"Visit Documentation"
<Icon icon=LinkExternal class="w-4 h-4" />
</a>
</div>
<div>
<h4 class="text-base font-semibold mb-3">"Alerts"</h4>
<div class="flex items-center gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<Icon icon=Info class="w-5 h-5 text-blue-600" />
<span class="text-sm text-blue-800">"This is an informational message"</span>
</div>
</div>
<div>
<h4 class="text-base font-semibold mb-3">"Navigation"</h4>
<div class="flex items-center gap-2">
<button class="p-2 border rounded hover:bg-gray-50" aria-label="Previous">
<Icon icon=IconChevronLeft class="w-4 h-4 text-gray-600" />
</button>
<span class="text-sm text-gray-700">"Page 1 of 10"</span>
<button class="p-2 border rounded hover:bg-gray-50" aria-label="Next">
<Icon icon=IconChevronRight class="w-4 h-4 text-gray-600" />
</button>
</div>
</div>
<div>
<h4 class="text-base font-semibold mb-3">"Social Media"</h4>
<div class="flex gap-4">
<a href="#" class="p-2 text-gray-600 hover:text-gray-900" aria-label="GitHub">
<Icon icon=IconGitHub class="w-6 h-6" />
</a>
<a href="#" class="p-2 text-gray-600 hover:text-blue-600" aria-label="LinkedIn">
<Icon icon=IconLinkedIn class="w-6 h-6" />
</a>
<a href="#" class="p-2 text-gray-600 hover:text-gray-900" aria-label="X">
<Icon icon=IconX class="w-6 h-6" />
</a>
</div>
</div>
</div>
}
}
Anatomy
use leptos::prelude::*;
use mosaic_tiles::icon::*;
#[component]
pub fn IconAnatomy() -> impl IntoView {
view! { <Icon icon=IconSearch /> }
}
API Reference
Icon
SVG icon component with tree-shaking support.
Icons use currentColor and inherit text color from parent elements. Size is controlled via Tailwind width and height classes.
| Attribute | Type | Default | Description |
|---|---|---|---|
| icon | IconData | (required) | The icon to display. Available icons: IconChevronUp, IconChevronDown, IconChevronLeft, IconChevronRight, IconSearch, LinkExternal, Info, Mail, CopyPaste, IconLinkedIn, IconX, IconGitHub, People, Hamburger, Document, Data, Question, LockClosed, LockOpen, Clock, Flag, OpenDocument, Tune, Grid, DownloadFile |
| class | String | "" | Optional CSS classes for custom styling (e.g., w-6 h-6 text-gray-600) |