Icons

Overview & Philosophy

ln-icon is applied to standard SVG elements via <svg class="ln-icon"><use href="#ln-icon-name"></use></svg>. A central MutationObserver observes the DOM for icon references, automatically fetches missing vector glyphs on-demand from a CDN or local repository, and caches them in localStorage. It compiles icons into a single hidden #ln-icon-sprite sheet at the top of the document, rendering crisply with zero JavaScript footprint after load while inheriting colors dynamically via CSS currentColor.

In ln-ashlar, this on-demand sprite generator keeps production bundle sizes at zero by fetching only the icons actively present on the page.

The Asset Pipeline Doctrine

An icon utility is not responsible for defining or editing vector files. It acts strictly as an on-demand compiler. By mapping DOM references to distinct CDN endpoints, it ensures that your bundle size remains zero regardless of how many icons are loaded. The SVG `use` href attribute is the sole contract.

Key Architectural Advantages

Dual CDN Routing Channels: Automatically detects the prefix on the icon reference. #ln-{name} loads outline icons from the global Tabler Icons suite, while #lnc-{name} routes to a customizable corporate asset server for specialized brand icons.
Local Caching Layer: Fetches each icon once. The raw vector payload is cached inside localStorage with a version prefix (lni:{name}). Subsequent page renders read the vector path directly from cache, resulting in instant rendering with zero network latency.
Re-Rendering Observer: Equipped with a robust MutationObserver. Any dynamically created DOM node or runtime modification to an icon's href attribute (e.g. morphing a button icon to a checkmark) is captured and compiled instantly.

For the full guide see the ln-icon README and the architecture reference.

Navigation

#ln-home

#ln-users

#ln-books

#ln-settings

#ln-logout

Actions

#ln-icon-x

#ln-menu

#ln-plus

#ln-edit

#ln-trash

#ln-eye

#ln-device-floppy

#ln-search

#ln-icon-check

#ln-copy

#ln-link

#ln-upload

#ln-download

#ln-refresh

#ln-printer

#ln-lock

#ln-star

#ln-filter

#ln-calendar

Arrows

#ln-arrow-up

#ln-arrow-down

#ln-arrows-sort

Status

#ln-circle-check

#ln-circle-x

#ln-info-circle

#ln-alert-triangle

Data / Content

#ln-chart-bar

#ln-clock

#ln-mail-opened

#ln-book

#ln-globe

#ln-list

#ln-box

#ln-building

People / Contact

#ln-user

#ln-mail

#ln-phone

#ln-compass

File Types

Custom icons — require window.LN_ICON_CUSTOM_CDN to be set. Use the #lnc- prefix.

#lnc-file

#ln-icon-custom-file-pdf

#ln-icon-custom-file-doc

#ln-icon-custom-file-epub

Sizes

ln-icon--sm (1rem)

default (1.25rem)

ln-icon--lg (1.5rem)

ln-icon--xl (4rem)

How it works

Icons are fetched on demand from the Tabler Icons CDN (jsDelivr) and assembled into a hidden sprite in <body>. Any icon from Tabler works — just use its name as #ln-{name}. MutationObserver picks up icons added after page load automatically.

Exception: #ln-icon-custom-file-pdf, #ln-icon-custom-file-doc, #ln-icon-custom-file-epub are custom multi-color icons served from your own CDN — they do not follow currentColor.

<!-- Standalone icon -->
<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-home"></use></svg>

<!-- Icon in a button with text -->
<button>
    <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-plus"></use></svg>
    Add User
</button>

<!-- Icon-only button — aria-label required -->
<button aria-label="Close">
    <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
</button>

<!-- Accordion chevron — CSS rotates on open -->
<header data-ln-toggle-for="panel1">
    Section Title
    <svg class="ln-icon ln-chevron" aria-hidden="true"><use href="#ln-icon-arrow-down"></use></svg>
</header>

<!-- Custom icon (requires window.LN_ICON_CUSTOM_CDN) -->
<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-custom-file-pdf"></use></svg>

Custom Icons (lnc-)

Custom icons use the #lnc- prefix and are served from your own CDN. Set window.LN_ICON_CUSTOM_CDN before the script loads:

<script>
    window.LN_ICON_CUSTOM_CDN = 'https://your-cdn.com/icons';
</script>
<script src="dist/ln-ashlar.iife.js" defer></script>

<!-- Use custom icons the same way -->
<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-custom-my-icon"></use></svg>

To add a new custom icon: create js/ln-icon/icons/{name}.svg with stroke="currentColor", run npm run build, then upload dist/icons/{name}.svg to your CDN.

Mode

Skin

Theme