Lobe Icons React Native

React Native Package

Popular AI / LLM Model Brand Icons for React Native and Expo. See them all on one page at icons.lobehub.com. Contributions, corrections & requests can be made on GitHub.

Changelog · Report Bug · Request Feature

🚀 Installation

npm install @lobehub/icons-rn
# or
yarn add @lobehub/icons-rn
# or
pnpm add @lobehub/icons-rn

Peer Dependencies

This package requires the following peer dependencies:

npm install react-native-svg
# or
yarn add react-native-svg
# or
pnpm add react-native-svg

Optional: Gradient Support

For gradient background support in Avatar components, install expo-linear-gradient:

npm install expo-linear-gradient
# or
yarn add expo-linear-gradient
# or
pnpm add expo-linear-gradient

💡 Note: If expo-linear-gradient is not installed, gradient backgrounds will automatically fallback to solid colors.

📖 Usage

💡 API Compatibility: The React Native package API is almost identical to the web version. You can refer to the web documentation for comprehensive usage examples and advanced patterns.

Basic Usage

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe size={32} />
    </View>
  );
}

With Styling

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe size={24} style={{ marginRight: 8, color: '#007AFF' }} />
    </View>
  );
}

Color Version

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe.Color size={32} />
    </View>
  );
}

Text Version

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe.Text size={32} />
    </View>
  );
}

Avatar Version

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe.Avatar size={48} />
    </View>
  );
}

Avatar with Gradient Background

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      {/* CSS gradient format - requires expo-linear-gradient */}
      <Adobe.Avatar size={48} background="linear-gradient(45deg, #9AD8F8, #3D8FFF, #6350FB)" />

      {/* Automatic fallback to solid color if gradient library not available */}
      <Adobe.Avatar size={48} background="linear-gradient(to right, #FF6B35, #F7931E)" />
    </View>
  );
}

Combine Version (Icon + Text)

import { Adobe } from '@lobehub/icons-rn';

export default function App() {
  return (
    <View style={styles.container}>
      <Adobe.Combine size={32} text="Adobe" textColor="#000000" />
    </View>
  );
}

🎨 API Reference

Icon Props

| Prop | Type | Default | Description | | ------- | ----------- | -------------- | ------------------- | | size | number | 24 | Icon size in pixels | | style | ViewStyle | undefined | Additional styles | | color | string | currentColor | Icon color |

Avatar Props

| Prop | Type | Default | Description | | -------------- | -------- | ----------- | --------------------------------------------------------------- | | size | number | 24 | Avatar size in pixels | | background | string | Brand color | Background color or CSS gradient (e.g., linear-gradient(...)) | | color | string | #FFFFFF | Icon color | | iconMultiple | number | 0.6 | Icon size multiplier |

Text Props

| Prop | Type | Default | Description | | ----------- | -------- | ---------- | ------------------- | | size | number | 24 | Text size in pixels | | text | string | Brand name | Custom text | | textColor | string | #000000 | Text color |

Combine Props

| Prop | Type | Default | Description | | --------------- | -------- | ---------- | --------------------------- | | size | number | 24 | Icon size in pixels | | text | string | Brand name | Custom text | | textColor | string | #000000 | Text color | | spaceMultiple | number | 0.1 | Space between icon and text | | textMultiple | number | 0.6 | Text size multiplier |

🔧 TypeScript Support

This package includes full TypeScript support:

import { Adobe, type AdobeProps } from '@lobehub/icons-rn';

// All props are properly typed
const MyComponent: React.FC = () => {
  return <Adobe size={32} />;
};

🎨 Gradient Background Support

Avatar components support CSS linear-gradient format for rich visual effects:

Supported Gradient Formats

// Direction keywords
<Adobe.Avatar background="linear-gradient(to right, #FF6B35, #F7931E)" />
<Adobe.Avatar background="linear-gradient(to bottom, #667eea, #764ba2)" />

// Degree angles
<Adobe.Avatar background="linear-gradient(45deg, #9AD8F8, #3D8FFF, #6350FB)" />
<Adobe.Avatar background="linear-gradient(135deg, #667eea, #764ba2)" />

// Multiple colors with positions
<Adobe.Avatar background="linear-gradient(90deg, #FF6B35 0%, #F7931E 50%, #C02425 100%)" />

📦 Available Icons

This package includes 225+ AI/LLM brand icons across three main categories:

🤖 Model Icons

Popular AI models including:

• Claude (Anthropic), GPT (OpenAI), Gemini (Google)
• Qwen (Alibaba), DeepSeek, ChatGLM (Zhipu)
• Llama (Meta), Mistral, RWKV, and many more

🏢 Provider Icons

AI service providers such as:

• OpenAI, Anthropic, Google, Microsoft
• AWS Bedrock, Azure AI, Hugging Face
• Groq, Together AI, Fireworks, and others

🛠️ Application Icons

AI-powered applications including:

• Adobe Firefly, Midjourney, Cursor
• GitHub Copilot, Notion, Figma
• ComfyUI, Gradio, LangChain, and more

🌐 Complete Icon Gallery

View all available icons with interactive examples at icons.lobehub.com.

Each icon supports multiple variants:

• Monochrome - Inherits color from parent
• Color - Brand-specific colors
• Avatar - Circular background style
• Text - Brand name text
• Combine - Icon + text combination

🔗 Web Compatibility

This React Native package maintains API compatibility with the web version. For comprehensive documentation, advanced usage patterns, and live examples, visit:

• 📚 Documentation: icons.lobehub.com
• 🎮 Interactive Examples: All usage examples from the web docs work with React Native
• 🔧 Advanced Patterns: Component composition, theming, and customization guides
• 🎨 Design Guidelines: Icon sizing, spacing, and accessibility best practices

The main differences are:

• Uses react-native-svg instead of regular SVG
• Requires ViewStyle instead of CSSProperties for styling
• Uses React Native's theming instead of CSS variables

🆚 Comparison with Other Packages

| Package | Target | Bundle Size | Features | | --------------------------- | ------ | ----------- | --------------------- | | @lobehub/icons | Web | Larger | Full React components | | @lobehub/icons-static-svg | Static | Small | SVG files only | | @lobehub/icons-rn | Mobile | Optimized | RN components |

🤝 Contributing

We welcome contributions! Please see our contributing guide for details.

📄 License

Copyright © 2023 LobeHub. This project is MIT licensed.