$ show homarr-labs/dashboard-icons
This repository hosts a curated collection of over 1800 dashboard icons for self-hosted services and applications, accompanied by a full-stack web application for browsing, searching, downloading, and submitting icons. The frontend is built with Next.js 16, React 19, Tailwind CSS 4, and shadcn/ui components, and it uses PocketBase as the backend for authentication, icon submissions, and external icon source management. The application provides an MCP (Model Context Protocol) server endpoint that allows AI assistants to search icons and resolve CDN URLs. It also includes an SVG color customizer for inline theme adjustments, a community submission workflow with admin approval, and automated syncs from third-party sources (Simple Icons, selfh.st, LobeHub). The codebase is well-structured with modern tooling, CI/CD pipelines, and both unit and end-to-end tests. While the repository is primarily an icon asset collection, the accompanying web application delivers significant value through its search, customization, and community features.
The LLM identified 4 files worth highlighting for reuse:
Provides functions to extract fill/stroke colors from SVG strings, normalize them to lowercase hex, and apply color mappings by replacing matched colors. The `extractColorsFromSvg` and `applyColorMappingsToSvg` functions form a reusable pattern for dynamic SVG recoloring in any application that needs user-customizable icon colors. It handles edge cases like `currentColor`, inline style attributes, and multiple color values per element. This component is self-contained and can be extracted with minimal modification for other projects requiring SVG color customization.
Implements the Model Context Protocol (MCP) server handler that exposes four tools: `search_icons`, `get_icon`, `get_icon_url`, and `suggest_icon`. It integrates PostHog analytics for tool usage tracking and uses a rate-limiting middleware. This component demonstrates a clean, reusable pattern for exposing application functionality to AI assistants through a standardized protocol. The handler is decoupled from the transport layer (HTTP) and can be adapted for other MCP transports or other AI integration frameworks.
Provides a comprehensive fuzzy search implementation for icon names and aliases. It uses Levenshtein distances, character-order scoring, and boosts matches in primary names over aliases. The search sorts results by relevance with native icons ranked first. This module is self-contained (only depends on the icon data shape) and can be extracted and reused in any project requiring lightweight, offline fuzzy search without external dependencies like Fuse.js. The scoring weights and filtering logic are clearly separated and configurable.
Defines the `EXTERNAL_SOURCES` registry using a discriminated union type (`ExternalSourceId`) and a constant array of source configurations. Each source entry includes a slug, display name, default format, base URL template, and an import function pointer. This pattern enables adding new external icon sources by simply extending the registry with a new config entry and importer script, without modifying core UI logic. The adapter pattern is cleanly separated and demonstrates an extensible design for integrating third-party data sources.