Basic Usage

Learn how to embed and style trker-icon in your HTML templates.

CSS & Webfont

After linking the CSS, use an <i> tag with two classes: the base trker class and the icon-specific class.

Base class required

Always include trker before the icon class. It sets the font-family and base rendering.

index.html

<!-- Basic icon -->
<i class="trker trker-home"></i>

<!-- Inside a button -->
<button>
  <i class="trker trker-save" aria-hidden="true"></i>
  Save Changes
</button>

Inline SVG

Copy the raw SVG from the icon browser and paste it directly into your HTML. Icons use currentColor by default so they inherit your text color automatically.

Zero HTTP requests for icon assets
Full control over individual SVG paths via CSS
Works without loading any font file

Things to keep in mind

· Code clutter: your HTML can fill up with SVG markup quickly. In Laravel you can avoid this by wrapping icons in a Blade component — <x-icon name="home" /> keeps templates clean.
· No separate caching: unlike a font file, inline SVGs live inside the HTML document so the browser can't cache them independently. Each page load re-downloads the icon markup, which slightly increases HTML size.

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round"
        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3..."/>
</svg>

SVG Sprite

Bundle all icons into a single sprite.svg file using <symbol> elements, then reference them with <use>. One HTTP request, full CSS color control.

sprite usage

<!-- Embed sprite at top of page (or fetch via JS) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="trker-home" viewBox="0 0 640 640">
    <path fill="currentColor" d="M..."/>
  </symbol>
</svg>

<!-- Reference by id -->
<svg class="w-6 h-6 text-primary">
  <use href="#trker-home"/>
</svg>

<!-- Or reference an external sprite file -->
<svg class="w-6 h-6">
  <use href="/icons/sprite.svg#trker-home"/>
</svg>

Best for icon-heavy apps — all icons load in a single request and the browser caches the file. External sprite references don't work in some older browsers without a polyfill.

PNG

For environments that don't support SVG — emails, native apps, legacy systems. Download individual icons as PNG from the icon browser at your chosen size.

Available sizes: 16, 32, 64, 128, 256, 512 px
Color is baked in — set it before downloading
Can't be restyled with CSS after export

bulk conversion with ImageMagick

# Single icon
convert -background none icon.svg -resize 64x64 icon-64.png

# Batch convert all SVGs in a folder
for f in *.svg; do convert -background none "$f" -resize 64x64 "${f%.svg}-64.png"; done

Icon Naming

All icon classes follow the pattern trker-{name}. You can find the exact class name for any icon in the icon browser — click any icon to copy its class.

<i class="trker trker-home"></i>       // home
<i class="trker trker-settings"></i>   // settings
<i class="trker trker-arrow-right"></i> // arrow-right

Previous Installation Next Sizing