AngularLynx

    Icon

    195 vector icons from the Lucide set, drawn with Lynx's <svg> element.

    ui-iconsrc/app/app.ts

    Installation

    npx @blotch/dolan add icon
    import { UiIcon } from '../components/ui/icon';

    Usage

    src/app/app.ts
    import { Component } from '@angular/core';
import { UiIcon } from '../components/ui/icon';

@Component({
  selector: 'app-root',
  imports: [UiIcon],
  template: `<ui-icon name="heart" size="lg" color="#ef4444" />`,
})
export class App {}

    Colors

    Pass color a literal color, such as #71717a or rgba(9, 9, 11, 1).

    • The icon's SVG is drawn on its own, so it can't read CSS. var(--primary) and text color classes have no effect.
    • Without color, the icon keeps its SVG's currentColor, which doesn't follow your text color.
    • If you use dark mode, pick the color from your theme signal, for example [color]="theme.isDarkMode() ? '#fafafa' : '#09090b'".

    Sizes

    <ui-icon name="heart" size="xs" />
<ui-icon name="heart" size="sm" />
<ui-icon name="heart" size="md" />
<ui-icon name="heart" size="lg" />

    The sizes are 16, 20, 24 (the default) and 32 pixels square.

    Type-safe names

    IconName is the union of every icon name. ICONS maps each name to its SVG markup, so Object.keys(ICONS) lists them all.

    import { signal } from '@angular/core';
import { type IconName } from '../components/ui/icon';

const current = signal<IconName>('check');

    Spacing

    UiIcon has no class input. A class you write on <ui-icon> lands on its outer element, which is enough for margins such as class="mr-2".

    Available icons

    Common: check, x, plus, minus, chevron-down, chevron-up, chevron-left, chevron-right, arrow-left, arrow-right, search, menu, info, alert-triangle, loader, circle, ellipsis, eye, eye-off, settings, trash, heart, star, bell

    Navigation and arrows: arrow-up, arrow-down, arrow-up-right, arrow-up-left, arrow-down-right, arrow-down-left, chevrons-up, chevrons-down, chevrons-left, chevrons-right, move, maximize, minimize, external-link, refresh-cw, rotate-cw, undo-2, redo-2

    Actions and editing: edit, pencil, copy, clipboard, save, download, upload, share-2, sliders-horizontal, zoom-in, zoom-out, scissors, trash-2, pin, link, filter

    Media: play, pause, square, circle-stop, skip-forward, skip-back, rewind, fast-forward, volume-2, volume-x, mic, mic-off, camera, video, music, headphones

    Communication: mail, message-circle, message-square, send, phone, phone-call, at-sign, inbox, megaphone, rss, reply, globe

    Files and folders: file, file-text, file-plus, folder, folder-open, book, book-open, archive, paperclip, newspaper, database, hard-drive

    Status: check-circle, x-circle, alert-circle, plus-circle, minus-circle, shield, shield-check, lock, lock-open, key, ban, help-circle

    People: user, users, user-circle, user-plus, user-check, user-x, thumbs-up, thumbs-down, smile, frown, hand, handshake

    Commerce: shopping-cart, shopping-bag, credit-card, dollar-sign, tag, tags, gift, package, truck, wallet, receipt, store

    Weather and nature: sun, moon, cloud, cloud-rain, cloud-snow, wind, droplet, zap, snowflake, flame, sunrise, sparkles

    Places and devices: home, calendar, clock, map-pin, map, compass, wifi, bluetooth, battery, smartphone, monitor, laptop, server, cpu, keyboard, power

    Layout and text: layout-grid, layout-dashboard, table, columns-3, rows-3, list, list-checks, list-ordered, bold, quote, align-left, align-center, align-right, type

    Charts: chart-bar, chart-line, chart-pie, chart-column, activity, trending-up, trending-down, target

    Objects: award, trophy, crown, rocket, lightbulb, coffee, terminal, code, command, git-branch, bug

    API

    UiIcon

    InputTypeDefaultDescription
    nameIconNameRequiredThe icon to draw.
    size'xs' | 'sm' | 'md' | 'lg''md'16, 20, 24 or 32 pixels square.
    colorstring | undefinedundefinedStroke color. Must be a literal color, not var(--x).

    No outputs.