Brand Assets Overview

What This Guide Covers

This comprehensive guide provides best practices for managing brand assets, fonts, animations, and other static assets in React Native applications. Our approach emphasizes performance optimization, proper organization, and maintainable workflows.

Important Scope Distinction: This guide covers brand assets, illustrations, fonts, and animations. For UI icons (navigation, actions, status), see the Icon Management.

Asset Categories

Brand Assets (This Guide)

• Logos: Company, product, partner logos
• Illustrations: Onboarding graphics, empty states, hero images
• Complex Graphics: Marketing materials, detailed graphics
• Backgrounds: Splash screens, hero banners, decorative images
• Screenshots: App previews, feature showcases

UI Icons (Icon Management Guide)

• Navigation Icons: Arrows, menu, close, back
• Action Icons: Edit, delete, save, search, share
• Status Icons: Check, error, warning, info, loading
• Social Icons: Platform icons used systematically

Purpose & Scope

• Target Audience: React Native developers working with brand assets, fonts, animations, and complex graphics
• Problems Addressed: Asset optimization, bundle size management, multi-resolution handling, performance issues
• Scope Boundaries: Covers static brand asset management but excludes UI icons and dynamic content from APIs

Asset Management Guides

Quick Decision Framework

When to Use This Guide vs Icon Management

Asset Format Decision Matrix

Asset Organization Structure

assets/                        # Project root level
├── brand/                     # Brand assets (this guide)
│   ├── logos/                 # Company/product logos
│   ├── illustrations/         # Marketing/onboarding graphics
│   └── backgrounds/           # Hero banners, splash screens
├── fonts/                     # Custom font files (this guide)
├── animations/                # Lottie and other animations (this guide)
└── sounds/                    # Audio assets (this guide)

Brand Asset Implementation Scenarios

"I need to add a company or product logo"

→ Follow Image Optimization Guide to choose between SVG (scalable) vs PNG (multi-resolution) based on logo complexity

"I want to add custom fonts for branding"

→ Use Font Management Guide for font loading strategies, fallbacks, and performance optimization

"I need to add hero images or marketing graphics"

→ Review Image Optimization Guide for JPG vs PNG decisions and multi-resolution handling

"I have large image assets affecting app performance"

→ Check Performance Optimization for bundle size analysis and optimization techniques

Key Principles

1. Performance First: Always optimize assets before adding to project
2. Format Selection: Choose the right format (SVG for logos, PNG for complex graphics, JPG for photos)
3. Resolution Independence: Provide multiple resolutions (@1x, @2x, @3x) for PNG/JPG assets
4. Bundle Size Awareness: Monitor impact on app bundle size
5. Platform Compatibility: Ensure assets work across iOS and Android

Getting Started

1. Start Here: Review the Image Optimization Guide to understand format decisions
2. Set Up Fonts: Follow Font Management Guide for custom typography
3. Add Animations: Use Animation Assets Guide for motion graphics
4. Optimize Performance: Apply Performance Optimization techniques

Related Documentation

• Icon Management - For UI icons and systematic iconography
• Project Structure - For overall project organization
• performance - For general performance optimization
• build-configuration - For bundling and deployment

Remember: Proper asset management directly impacts app performance, user experience, and development efficiency. Take time to understand format decisions and optimization strategies before implementing.