@animicons/react

Animated SVG icon library for React (web). 60fps CSS keyframe animations. Full colour customisation. Tree-shakeable.

Preview

Web demo

Install

npm install @animicons/react react-native-svg

Usage

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

// 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 px
`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

Healthcare

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

License

MIT