How to Create a Lottie Wordmark for Free

Lottie is the best format for lightweight, scalable web animations. A Lottie wordmark gives your brand a polished motion identity without the file-size penalty of video or the quality limits of GIF. Here is how to make one for free in under a minute.

What you need

• A brand name or short word (max 20 characters)
• A modern browser
• No design software, no account, no credit card

Step 1: Type your text

Open Wordmark and enter your brand name. Use letters, numbers, spaces, hyphens, or apostrophes. The live preview updates as you type.

Step 2: Pick a style

Choose a stroke style. Start with the cursive option for a handwritten feel, or try the sharper script styles for a more tactical look.

Step 3: Add an icon (optional)

You can prepend a small icon from the curated set. It inherits the stroke color and animates alongside the wordmark.

Step 4: Tune timing and colors

Adjust stroke width, letter spacing, reveal duration, and colors. Keep the background transparent if you plan to place the animation over a colored or image background.

Step 5: Export Lottie JSON

Click the EXPORT LOTTIE button. The downloaded file is a standard Bodymovin Lottie JSON that works with any Lottie player.

Step 6: Use it in your project

In React or Next.js, install lottie-react or uselottie-web directly. For best performance in Next.js App Router, load the player with next/dynamic and ssr: false.

Tips for a better result

• Shorter words animate more elegantly than long ones.
• Leave enough letter spacing for thin strokes to read clearly.
• Test the Lottie on mobile to confirm performance.

Frequently asked questions