Laravel Blade

Add the kit to a Laravel app and render icons from Blade views.

as Markdown, for notes or an AI chat

Two ways to use the icons in a Laravel app: the CSS classes in any view, or an anonymous component that inlines the SVG.

Add the kit#

Unzip the free web kit into public/assets/hubtoolify-icons and add the stylesheet to your layout:

Blade

<link rel="stylesheet" href="{{ asset('assets/hubtoolify-icons/css/hubtoolify-icons.min.css') }}">

<i class="hti hti-solid hti-user" aria-hidden="true"></i>

Or install @hubtoolify/icons from npm and let its command copy css/ and svg/ into public/. Do not import the stylesheet through Vite: a bundler would try to process every icon file it points to.

Terminal

npm install @hubtoolify/icons
npx hubtoolify-icons public/assets/hubtoolify-icons

An inline SVG component#

For inline SVG (emails, PDFs, places without the stylesheet), one anonymous component reads icons from the kit:

resources/views/components/hti.blade.php

{{-- resources/views/components/hti.blade.php --}}
@props(['name', 'variant' => 'line', 'size' => 24])
@php
    $file = public_path("assets/hubtoolify-icons/svg/{$variant}/{$name}.svg");
    $svg = is_file($file) ? file_get_contents($file) : '';
    $svg = preg_replace('/ width="24" height="24"/', " width=\"{$size}\" height=\"{$size}\"", $svg, 1);
@endphp
<span {{ $attributes->merge(['class' => 'hti-inline']) }}>{!! $svg !!}</span>

Blade

<x-hti name="calendar" variant="duotone" :size="20" class="text-blue-600" />

Never pass request data into name unchecked. The component reads a file path built from it. Use names from your own code, or check them against the kit's icons.json first.