Lobe Icons

Lobe Icons is a large, actively maintained collection of brand logos for AI companies, LLM providers, and model-serving platforms, packaged as tree-shakable React and React Native components. Each brand ships as a folder under src/ (330+ as of this writing) exposing mono, color, avatar, and text variants generated from a shared style definition, so a single import gives you every rendering mode for that logo.

Beyond the React package, the monorepo also publishes framework-agnostic static assets — @lobehub/icons-static-svg, -png, -webp, and -avatar — mirrored to unpkg and the npmmirror/Aliyun CDN, so teams that aren’t on React can still drop in a logo via a plain <img> tag. A ModelIcon component adds keyword-based model-name resolution (matching strings like meta-llama/llama-3.3-70b or muse-spark-1.3 to the correct brand) so consumers of chat/agent UIs can render the right logo from a raw model identifier without maintaining their own mapping table.

The project is maintained by LobeHub, the team behind the Lobe Chat AI assistant, and is used as the icon source for that product and for other tools in their ecosystem that need to represent AI providers and models visually.

What You Get

• React and React Native components for 300+ AI/LLM brand and provider logos, each with mono, color, avatar, and text variants
• A ModelIcon component that resolves a raw model identifier string (e.g. meta-llama/llama-3.3-70b) to the correct brand icon via keyword/regex matching
• Framework-agnostic static asset packages (-static-svg, -static-png, -static-webp, -static-avatar) usable via plain <img> tags, served from unpkg or the npmmirror/Aliyun CDN mirror
• Tree-shakable ESM output (built with father) so bundlers only ship the specific icons actually imported
• Combine/avatar helper components (ProviderCombine, IconCombine, IconAvatar) for composing provider + model icon pairs in chat and agent UIs

Common Use Cases

• Rendering provider/model logos in an LLM chat or agent interface (model pickers, message headers, settings pages)
• Building an AI tool directory or comparison site that needs consistent brand marks for dozens of AI vendors
• Adding a brand icon to a non-React app (Vue, plain HTML, email templates) via the static SVG/PNG/WebP CDN packages
• Mapping raw model ID strings returned from an API response to a recognizable logo instead of maintaining a custom icon map
• Theming dashboards or docs pages that reference multiple AI providers with light/dark-aware logo variants

Under The Hood

Architecture The repo is a pnpm workspace: the root @lobehub/icons package holds one directory per brand under src/ (e.g. src/Anthropic/), each exporting Mono, Color, Avatar, and Text sub-components built from a shared style.ts (color/title constants) and composed onto a single default export object (Icons.Avatar, Icons.Text, Icons.colorPrimary). Higher-level composition lives in src/features/ — ModelIcon and ProviderIcon look up a brand via modelConfig.ts/providerConfig.tsx keyword tables and render the matched icon, falling back to DefaultIcon/DefaultAvatar when nothing matches. packages/ holds sibling packages (react-native, static-svg, static-png, static-webp, static-avatar) built and released independently via multi-semantic-release, so the same source SVGs feed both the component library and framework-agnostic static distributions. Adding a brand means adding a folder and wiring it into the relevant config table — a flat, additive structure with low coupling between icons.

Tech Stack TypeScript + React 19 (with a React Native variant) built via father (Umi’s library bundler) to ESM-only es/ output; styling helpers from antd-style and polished; lucide-react for a handful of generic UI icons used in docs. Static SVG/PNG/WebP generation is a separate pipeline (svgo for optimization, sharp and puppeteer for raster conversion) driven by scripts in scripts/svgWorkflow. Documentation is built with the LobeHub-internal @lobehub/docs-kit (lobedocs) rather than a generic static-site generator. Releases use semantic-release/multi-semantic-release with conventional commits enforced by commitlint and husky.

Code Quality Testing uses Vitest with @testing-library/react and renderToStaticMarkup for snapshot-free assertions; the checked-in test suite is thin (a single tests/ModelIcon.test.tsx covering brand-resolution edge cases like disambiguating Meta’s “Muse Spark” from iFlyTek’s “Spark”) rather than per-icon rendering tests, which is reasonable given most icons are generated SVG wrappers rather than logic-bearing code. TypeScript runs in strict mode with a dedicated type-check CI script; linting is centralized through the shared @lobehub/lint ESLint config plus Stylelint and dpdm for circular-dependency detection, all wired into lint-staged/husky pre-commit hooks and a GitHub Actions test.yml workflow.

What Makes It Unique Most icon libraries are generic (brand-agnostic) or hand-curated one-off SVG sets; Lobe Icons is scoped specifically to the AI/LLM ecosystem and is kept current as new model providers appear, since it’s a working dependency of the actively developed Lobe Chat product rather than a side project. The ModelIcon keyword-resolution layer is the more novel piece — it turns an arbitrary model-ID string into a correctly-branded icon (including deliberately distinguishing similarly-named models from different vendors), a problem most consumers would otherwise solve with a bespoke, quickly-stale lookup table. Shipping the same source assets simultaneously as React components, React Native components, and framework-agnostic static CDN bundles from one monorepo is also a broader distribution strategy than typical single-target icon packages.