1. Go to this page and download the library: Download syriable/filament-icon-hub library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
syriable / filament-icon-hub example snippets
IconPicker::make('icon')
use Syriable\Filament\Plugins\IconHub\Forms\Components\IconPicker;
IconPicker::make('icon')
->
use Syriable\Filament\Plugins\IconHub\Forms\Components\IconSelect;
IconSelect::make('icon');
IconSelect::make('icons')
->multiple()
->providers(['heroicons', 'brand'])
->optionsLimit(30) // icons per request (default 50)
->groupByProvider(false) // default: grouped when several providers are offered
->grid(false) // list of "icon + name" rows instead of the tile grid
->extraIconAttributes(['class' => 'text-primary-600']);
use Syriable\Filament\Plugins\IconHub\Infolists\Components\IconHubEntry;
use Syriable\Filament\Plugins\IconHub\Tables\Columns\IconHubColumn;
IconHubColumn::make('icon'); // also handles arrays
IconHubColumn::make('icon')->size('lg')->showLabel();
IconHubEntry::make('icon')->placeholder('No icon');
use Syriable\Filament\Plugins\IconHub\Facades\IconHub;
NavigationItem::make('Reports')->icon(IconHub::html($team->icon));
namespace Syriable\Filament\Plugins\IconHub\Contracts;
interface IconProvider
{
public function id(): string; // "company"
public function label(): string; // "Company icons", must be cheap
public function status(): ProviderStatus; // Available | Unconfigured | Unavailable, must be cheap
public function metadata(): ProviderMetadata; // categories, variants, remote, total
public function search(IconQuery $query): IconResults; // one page of icons
public function find(string $name): ?Icon; // resolve a stored value
}
use Syriable\Filament\Plugins\IconHub\Data\Icon;
use Syriable\Filament\Plugins\IconHub\Data\IconSource;
use Syriable\Filament\Plugins\IconHub\Providers\IndexedIconProvider;
final class DesignSystemIconProvider extends IndexedIconProvider
{
public function id(): string
{
return 'ds';
}
public function label(): string
{
return 'Design system';
}
protected function buildIndex(): iterable
{
$manifest = json_decode(file_get_contents(base_path('design-system/icons.json')), true);
foreach ($manifest['icons'] as $item) {
yield new Icon(
provider: 'ds',
name: $item['slug'],
label: $item['title'],
source: IconSource::svgFile(base_path("design-system/svg/{$item['slug']}.svg")),
category: $item['group'] ?? null,
tags: $item['keywords'] ?? [],
);
}
}
protected function indexCacheKey(): array
{
// Rebuild the cached index whenever the manifest changes.
return [filemtime(base_path('design-system/icons.json'))];
}
}
namespace App\Icons;
use Illuminate\Http\Client\PendingRequest;
use Illuminate\Http\Client\Response;
use Syriable\Filament\Plugins\IconHub\Data\Icon;
use Syriable\Filament\Plugins\IconHub\Data\IconQuery;
use Syriable\Filament\Plugins\IconHub\Data\IconResults;
use Syriable\Filament\Plugins\IconHub\Data\IconSource;
use Syriable\Filament\Plugins\IconHub\Data\ProviderMetadata;
use Syriable\Filament\Plugins\IconHub\Providers\HttpIconProvider;
final class FlaticonProvider extends HttpIconProvider
{
protected int $timeout = 4;
public function id(): string
{
return 'flaticon';
}
public function label(): string
{
return 'Flaticon';
}
public function metadata(): ProviderMetadata
{
return new ProviderMetadata(
categories: ['arrows' => 'Arrows', 'business' => 'Business', 'social' => 'Social'],
remote: true,
);
}
// Missing key: the provider shows as "not configured" instead of failing.
protected function isConfigured(): bool
{
return filled(config('services.flaticon.key'));
}
// Credentials stay on the server. They are never part of an Icon.
protected function http(): PendingRequest
{
return parent::http()
->baseUrl('https://api.flaticon.test/v3')
->withToken(config('services.flaticon.key'));
}
protected function searchRequest(PendingRequest $http, IconQuery $query): Response
{
return $http->get('/search/icons', array_filter([
'q' => $query->search,
'category' => $query->category,
'page' => $query->page,
'limit' => $query->perPage,
]));
}
protected function mapSearchResponse(array $data, IconQuery $query): IconResults
{
return new IconResults(
icons: array_map($this->toIcon(...), $data['data']),
hasMore: $data['metadata']['page'] < $data['metadata']['pages'],
total: $data['metadata']['total'] ?? null,
);
}
// Optional: resolve icons that are not in the cache yet.
protected function findRequest(PendingRequest $http, string $name): ?Response
{
return $http->get("/item/icon/{$name}");
}
protected function mapIconResponse(array $data, string $name): ?Icon
{
return isset($data['data']) ? $this->toIcon($data['data']) : null;
}
private function toIcon(array $item): Icon
{
return new Icon(
provider: 'flaticon',
name: (string) $item['id'],
label: $item['description'],
source: IconSource::url($item['images']['64']),
category: $item['category'] ?? null,
tags: $item['tags'] ?? [],
);
}
}
// 1. config/icon-hub.php, resolved from the container (dependencies injected)
'providers' => [App\Icons\CompanyIconProvider::class],
// 2. At runtime, e.g. in AppServiceProvider::boot()
use Syriable\Filament\Plugins\IconHub\Facades\IconHub;
IconHub::register(new CompanyIconProvider(...));
IconHub::register(CompanyIconProvider::class);
// 3. Lazily, only when icons are first needed
IconHub::discoverUsing(fn () => [new CompanyIconProvider(...)]);
'cache' => [
'enabled' => true,
'store' => null, // any cache store; null = default
'prefix' => 'icon-hub',
'ttl' => ['search' => 900], // null caches forever, but only if you set it explicitly
],
IconPicker::make('icon')
->providers(['heroicons', 'brand']) // allow-list and order
->multiple() // store an array
->searchable(false) // hide the search input
->perPage(90) // icons per request
->placeholder('Pick an icon')
->modalHeading('Choose a menu icon')
->modalWidth(Width::FiveExtraLarge)
->showProviderFilter()
->showCategoryFilter(false)
->showVariantFilter(false);