@animicons/react-native

@animicons/react-native

Animated SVG icon library for React Native. 104 icons. 60fps animations powered by react-native-reanimated. Full colour customisation. Tree-shakeable.

Preview

Web Playground →

Install

npm install @animicons/react-native react-native-svg react-native-reanimated

Add to babel.config.js:

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'], // or 'babel-preset-expo' for Expo
  plugins: ['react-native-reanimated/plugin'],
};

Expo:

npx expo install react-native-svg react-native-reanimated

Usage

import { ECG, Brain, Loader, Bell, Heart } from '@animicons/react-native'

// Auto-plays, loops forever
<ECG size={48} color="#f43f5e" />

// Full colour control
<Brain
  size={40}
  strokeColor="#ec4899"
  fillColor="#fce7f3"
  secondaryColor="#fbcfe8"
  strokeWidth={2}
  opacity={0.9}
/>

// Slow, plays once, fires callback
<Loader speed="slow" loop={false} onAnimationEnd={() => console.log('done')} />

Props

Prop	Type	Default	Description
size	number	48	Width and height in dp
color	string	icon default	Primary shorthand — sets stroke + fill
strokeColor	string	color	Explicit stroke override
fillColor	string	color	Explicit fill override
secondaryColor	string	auto	Background / glow colour
opacity	number	1	Global opacity (0–1)
strokeWidth	number	icon default	Stroke thickness
autoPlay	boolean	true	Start animation on mount
loop	boolean	true	Repeat indefinitely
speed	'slow'|'normal'|'fast'	'normal'	Duration multiplier
style	object	—	Container style
onAnimationEnd	() => void	—	Fires at end of each cycle

Icons

UI / System

Pulse Check Loader Upload Wifi Bell Star Heart

Navigation & Structure

Home Menu KebabMenu MoreHorizontal Back Forward ChevronDown Close Grid Search ChevronUp ChevronLeft ChevronRight ArrowUp ArrowDown ArrowLeft SortAsc SortDesc ZoomIn ZoomOut AlertTriangle AlertCircle Calendar Clock Globe Flag Notification

Core Actions

Add Edit Save Trash Share Download Refresh Sync Copy Pin Bookmark Filter Undo Redo

Communication & Social

Mail Chat Phone Video User Users ThumbsUp Send Reaction Mention

Settings & Configuration

Settings Sliders Lock Unlock Key Eye EyeOff Info Help Logout

File & Content

Folder Document Image Attachment Cloud Link Archive Tag

Media Playback

Play Pause Stop FastForward Rewind Volume Mute Microphone

Device & Hardware

Battery Bluetooth Location CloudSync Camera Brightness

Healthcare

ECG HeartRate Lungs Pill Thermometer DNA Syringe Brain BloodDrop Steps Sleep Oxygen Medkit

License

MIT