Highlight specific words with custom icons, apply unique font styles to individual words, and fine-tune every detail with pixel-perfect precision. Perfect for heroes, headlines, callouts, and expressive UI copy.
Inline SVG icons. Insert SVG icons before or after any word in your text. Icons flow naturally with your typography and stay perfectly aligned across breakpoints.
Word-level targeting. Choose exactly which word gets styled — even when the same word appears multiple times. Apply changes to the 1st, 2nd, 3rd (or any) occurrence.
Recolor icons & words. Change icon colors instantly. Optionally recolor the target word itself for extra emphasis.
Custom fonts per word. Apply a completely different font style to specific words using Framer’s native font picker. Perfect for brand accents and playful typography.
Precise positioning. Control icon size, zoom, rotation, and X/Y offsets.
Automatic aspect ratio. Icons scale intelligently based on their SVG viewBox.
Left or right placement. Choose whether your icon appears before or after the word.
SEO-friendly HTML tags. Use semantic tags (H1–H6, p, span) to keep your content accessible and search-friendly.
Text balancing. Optional multi-line text balancing for cleaner line breaks in headlines.
Debug mode. Visualize icon containers while positioning for pixel-perfect layouts.
Motiondrops
