Compass Lottie Animation Pack | 6 Animated Navigation and Direction Icons

A static compass icon tells a user nothing. A moving needle tells them the app is live, the signal is good and the direction is real.

This Compass Lottie animation pack gives you 6 compass animations with a needle that swings and settles. Each one has a different dial and color, so you can pick the style that matches your brand. Every file is a clean vector, so it stays sharp on any screen size.

The files run from 29 KB to 112 KB. Every animation is 1500 x 1500 pixels at 30 fps with a 4 second loop that repeats without a jump. Use the blue and red dials for travel and map products, the green dial for outdoor and fitness, and the dark face dials for night themes and premium app screens.

What's included (6 animations):

• Compass 1: classic blue ring with a red and blue needle, 29 KB

   

• Compass 2: red ring with a slim grey needle, 38 KB

   

• Compass 3: green ring with a fine detailed dial, 104 KB

   

• Compass 4: blue ring set on a soft blue tile, 98 KB

   

• Compass 5: dark face with a bright blue and red needle, 29 KB

   

• Compass 6: dark face with a blue outer ring, 112 KB

Ideal for:

• App onboarding and welcome screens
• Travel and flight booking apps
• Map, route and navigation screens
• Hiking, camping and outdoor websites
• Loading and searching states
• Website hero sections
• 404 and empty state pages
• Online courses and lesson slides
• Presentations and pitch decks
• Dashboard and widget icons

Technical benefits:

• 1500 x 1500 pixel canvas that scales to any size
• 30 fps playback for smooth motion
• 4 second loop with no visible jump
• Vector based, so it stays sharp on retina screens
• Small files from 29 KB to 112 KB
• Colors you can change in code or in After Effects
• Transparent background, so it sits on any color
• Works with any Lottie player

Compatible with:

• React
• Next.js
• Vue
• Angular
• Flutter
• React Native
• iOS
• Android
• Webflow
• Framer
• WordPress
• HTML websites
• After Effects