Icons

Custom SVG icons

Inline SVG marks for technologies Phosphor does not include. Use tint="brand" for official colours or tint="theme" for Harbour palette tokens that follow light/dark mode.

Component library Design system

Tints

PHP ecosystem

Brand tints use official technology colours. Theme tints use Harbour semantic tokens — brand and gray follow the runtime theme picker; emerald is fixed for code/file marks.

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
PHP php
Laravel laravel
Livewire livewire
Inertia inertia
Composer composer

Platforms & DevOps

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
GitHub github
Git git
Docker docker
DigitalOcean digitalocean
NGINX nginx
Steam steam

Cloud providers

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
Amazon Web Services aws
Hetzner hetzner
Linode linode
Vultr vultr
Cloudflare cloudflare
Google Cloud gcp
Microsoft Azure azure

AI providers

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
OpenAI openai
Anthropic anthropic
Claude claude
Google Gemini gemini
Mistral mistral
Ollama ollama
Hugging Face huggingface
Perplexity perplexity
DeepSeek deepseek
Meta AI metaai
Replicate replicate
OpenRouter openrouter
LangChain langchain
Cursor cursor
GitHub Copilot copilot

Operating systems

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
Ubuntu ubuntu
Linux linux
Debian debian
Fedora fedora
CentOS centos
Rocky Linux rockylinux
AlmaLinux almalinux
Red Hat redhat
Alpine Linux alpinelinux
Arch Linux archlinux
macOS macos
Windows windows
FreeBSD freebsd
NixOS nixos
openSUSE opensuse
Kali Linux kalilinux

Shells & terminals

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
Bash bash
Zsh zsh
Fish fish
PowerShell powershell
GNOME Terminal gnometerminal
iTerm2 iterm
Windows Terminal windowsterminal

Databases

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
MySQL mysql
PostgreSQL postgres
Redis redis
SQLite sqlite

Hosting & operations

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
Fleet / servers fleet
Delivery / deployments delivery
Sites sites
Backups backups
Recovery recovery
Databases (nav) databases
Queue workers workers
Scheduler / cron scheduler
Daemons daemons
Domains / DNS domains
SSL certificates certificates
Firewall firewall
Networking networking
Observability observability
Secrets / env secrets
Recipes recipes
Deploy scripts scripts
HDD / disk storage hdd

Agent operations

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
Agents (autonomous AI) agents
Agent loops loops
Runs / executions runs
Tools / MCP tools
Skills skills
Sandbox sandbox
Approvals approvals
Context context
Artifacts / files artifacts
Models (nav) models

Frontend & tooling

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
JavaScript javascript
TypeScript typescript
Vue vue
React react
Tailwind CSS tailwind
Vite vite
Node.js node
npm npm
HTML5 html
Stripe stripe
Figma figma

File types

Icon	Brand	Theme	thin	light	regular	bold	fill	duotone
File (PHP) file-php
File (Blade) file-blade
File (JS) file-js
File (TS) file-ts
File (CSS) file-css
File (Python) file-py
File (Vue) file-vue
File (SQL) file-sql
File (size / bytes) file-size

Usage

Drop-in with <x-ui.icon>

Pick a tint for automatic colour, or pass your own class to override. Weight and size work the same as Phosphor icons.

example.blade.php

blade

<x-ui.icon name="mysql" tint="brand" weight="duotone" />
 
<x-ui.icon name="laravel" tint="theme" />
<x-ui.icon name="file-js" tint="theme" />
 
<x-ui.icon name="github" class="text-gray-500" />

PHP

php

Left: brand · Right: theme

Laravel

laravel

Left: brand · Right: theme

Livewire

livewire

Left: brand · Right: theme

Inertia

inertia

Left: brand · Right: theme

Composer

composer

Left: brand · Right: theme

GitHub

github

Left: brand · Right: theme

Custom SVG icons

PHP ecosystem

Platforms & DevOps

Cloud providers

AI providers

Operating systems

Shells & terminals

Databases

Hosting & operations

Agent operations

Frontend & tooling

File types

Drop-in with &lt;x-ui.icon&gt;

Drop-in with <x-ui.icon>