repository·master·Indexed 24 days ago
https://github.com/lobehub/lobe-iconsA collection of popular AI and LLM model brand SVG logos and icons for web and mobile applications. It provides a tree-shakable library via @lobehub/icons, specialized support for React Native and Expo via @lobehub/icons-rn, and static assets in SVG, PNG, and WebP formats available through npm packages or CDNs (UNPKG and Aliyun). Features include multiple icon variants (Color, Text, Avatar, and Combine) and support for light/dark mode themes.
Lobe Icons provides a high-performance icon library with the following characteristics:
The converter automatically synchronizes three specific feature configuration files from the Web version to the React Native version to ensure consistency:
modelConfig.ts (Model icon mapping configuration)providerEnum.ts (Provider enumeration definitions)providerConfig.tsx (Provider icon mapping configuration)When syncing, the following transformations are applied:
Import Path Conversions:
@/IconName $\rightarrow$ ../icons/IconName@/features/IconAvatar $\rightarrow$ ./IconAvatar@/types $\rightarrow$ ./typesType Name Conversions:
ModelProvider $\rightarrow$ RNModelProviderModelMapping $\rightarrow$ RNModelMappingProviderMapping $\rightarrow$ RNProviderMappingModelProviderKey $\rightarrow$ RNModelProviderKeyIconType $\rightarrow$ RNIconPropsIconAvatarProps $\rightarrow$ RNIconAvatarPropsIconCombineProps $\rightarrow$ RNIconCombinePropsVariable and Other Changes:
modelMappings $\rightarrow$ rnModelMappingsproviderMappings $\rightarrow$ rnProviderMappings@lobehub/ui DivProps imports and type references.Pika component from @lobehub/icons provides several ways to represent the Pika brand, including standalone icons, text-based logos, combined assets, and avatars. Most components accept a size prop to control dimensions.The StreamLake provider in @lobehub/icons offers several ways to render brand assets, including standard icons, text-based logos, combined assets, avatars, and color constants. Most components accept a size prop to control dimensions.
import { StreamLake } from '@lobehub/icons';
// Basic usage
<StreamLake size={64} />If you are an AI agent, you can use @lobehub/icons by providing the following instruction to follow the specific skill requirements defined in the documentation.
Read https://lobehub.com/icons/skill.md and follow the instructions to use @lobehub/iconsThe Agui component and its sub-components are part of the @lobehub/icons package. You can use Agui to render icons, text, combined elements, and avatars. Most components accept a size prop to control their dimensions.
import { Agui } from '@lobehub/icons';
export default () => <Agui size={64} />;@lobehub/icons package provides specialized components for CopilotKit branding, including standard icons, text-based logos, combined assets, avatars, and color constants. Most components accept a size prop to control dimensions.The ProviderIcon component is used to render icons associated with specific service providers. It supports several rendering modes:
To use these features, you can reference the providerEnum for valid provider identifiers and providerConfig for detailed configuration settings.
You can serve Lobe Icons directly from a CDN without installing npm packages. The icons are organized into light and dark directories to support color scheme preferences. Replace [ICON SLUG] in the URLs below with the specific icon name (e.g., openai or openai-text).
Use https://unpkg.com/@lobehub/icons-static-avatar@latest/ as the base URL.
Use https://registry.npmmirror.com/@lobehub/icons-static-avatar/latest/files/ as the base URL.
<!-- UNPKG Example -->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://unpkg.com/@lobehub/icons-static-avatar@latest/dark/openai.png"
/>
<img
height="64"
src="https://unpkg.com/@lobehub/icons-static-avatar@latest/light/openai.png"
/>
</picture>
<!-- ALIYUN Example -->
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://registry.npmmirror.com/@lobehub/icons-static-avatar/latest/files/dark/openai.png"
/>
<img
height="64"
src="https://registry.npmmirror.com/@lobehub/icons-static-avatar/latest/files/light/openai.png"
/>
</picture>N8n component from @lobehub/icons provides several ways to render the n8n brand identity, including standard icons, text-based logos, combined assets, and avatars. Most components accept a size prop to control dimensions.The @lobehub/icons package provides a set of components for the Upstage brand, including the main icon, text-based branding, combined assets, avatars, and brand colors. You can import the Upstage component to access these sub-components.
import { Upstage } from '@lobehub/icons';Pollinations component from @lobehub/icons provides several ways to render brand assets, including standalone icons, text, combined assets, and avatars. You can control the visual scale using the size prop.