icons/packages/react-native/README.md

Hanzo 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 @hanzoai/icons-rn
# or
yarn add @hanzoai/icons-rn
# or
pnpm add @hanzoai/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 '@hanzoai/icons-rn';

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

With Styling

import { Adobe } from '@hanzoai/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 '@hanzoai/icons-rn';

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

Text Version

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

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

Avatar Version

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

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

Avatar with Gradient Background

import { Adobe } from '@hanzoai/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 '@hanzoai/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 '@hanzoai/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
@hanzoai/icons	Web	Larger	Full React components
@hanzoai/icons-static-svg	Static	Small	SVG files only
@hanzoai/icons-rn	Mobile	Optimized	RN components

🤝 Contributing

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

📄 License

Copyright © 2023 Hanzo.
This project is MIT licensed.