Icon
Remix Icon via the `<Icon>` wrapper. Default weight is the `-line` (outline) variant; the prototypes app dock pairs `-line` with `-fill` for the active item. Icons are a font, so they inherit `currentColor` and are sized via the `size` prop (font-size).
Usage
icon-usage.svelte
<script lang="ts">
import { Icon } from '$lib/components/ui/icon';
</script>
<Icon name="heart-line" size="1.25rem" class="text-primary" />Variants
Remix ships two weights per icon. bloom-nx defaults to the -line (outline) variant; the prototypes dock pairs -line with -fill to mark the active
tab.
icon-variants.svelte
<Icon name="heart-line" />
<Icon name="heart-fill" />Sample set
arrow-left-line
arrow-right-line
check-line
close-line
alert-line
heart-line
download-line
search-line
settings-line
more-line
icon-usage.svelte
<script lang="ts">
import { Icon } from '$lib/components/ui/icon';
</script>
<Icon name="heart-line" size="1.25rem" class="text-primary" />Catalog
A curated set of 108 commonly used Remix icons. Type to filter by name. The full Remix library exposes ~3,200 icons — browse the site to find more.
arrow-left-line
arrow-right-line
check-line
close-line
alert-line
heart-line
download-line
search-line
settings-line
more-line
arrow-up-line
arrow-down-line
refresh-line
arrow-left-right-line
arrow-left-s-line
arrow-right-s-line
arrow-up-s-line
arrow-down-s-line
checkbox-circle-line
close-circle-line
error-warning-line
information-line
question-line
add-line
subtract-line
delete-bin-line
pencil-line
file-copy-line
clipboard-line
scissors-line
home-line
user-line
account-circle-line
user-add-line
group-line
notification-2-line
notification-4-line
calendar-line
time-line
star-line
bookmark-line
folder-line
folder-open-line
file-line
file-text-line
image-line
video-line
music-line
mic-line
volume-up-line
volume-mute-line
play-line
pause-line
stop-line
skip-forward-line
skip-back-line
mail-line
chat-3-line
chat-1-line
send-plane-line
phone-line
camera-line
globe-line
map-pin-line
compass-line
flashlight-line
sun-line
moon-line
cloud-line
drop-line
lock-line
lock-unlock-line
key-line
shield-check-line
eye-line
eye-off-line
bank-card-line
shopping-cart-line
inbox-archive-line
price-tag-3-line
receipt-line
coins-line
wallet-line
bar-chart-line
line-chart-line
pie-chart-line
sparkling-line
lightbulb-line
trophy-line
flag-line
gift-line
emotion-line
thumb-up-line
thumb-down-line
upload-line
list-unordered
grid-line
layout-grid-line
filter-line
sort-asc
link
share-line
share-forward-line
code-line
terminal-line
window-line
smartphone-line
computer-line
icon-catalog.svelte
<script lang="ts">
import { Icon } from '$lib/components/ui/icon';
const catalog = ['search-line', 'heart-line' /* … */];
let query = $state('');
const filtered = $derived(
catalog.filter((n) => n.includes(query.toLowerCase()))
);
</script>
<input type="search" bind:value={query} placeholder="Search icons…" />
<div class="grid grid-cols-6 gap-2">
{#each filtered as name (name)}
<div title={name}><Icon {name} size="1.25rem" /></div>
{/each}
</div>API reference
The <Icon> wrapper renders a Remix font glyph (<i class='ri-…'>).
| Prop | Type | Default | Description |
|---|---|---|---|
string | — | Remix icon name WITHOUT the `ri-` prefix, e.g. "arrow-down-s-line". | |
string | "1em" | Glyph size as any CSS length (sets font-size). Defaults to the surrounding text size. | |
string | — | Accessible label. When set, the icon becomes role="img"; when omitted it is aria-hidden (decorative). | |
string | — | Tailwind classes forwarded to the root <i> (color via text-*, box via size-*). |