Airbnb’s New “Lava” Icon Format

Airbnb’s May 2025 app redesign introduced a brand-new media format for icons, known internally as “Lava.” These are not ordinary static images or typical Lottie animations — Airbnb actually engineered a custom “micro” video format specifically for their animated icons(, ). The result is a set of dimensional, animated 3D icons that bring the interface to life in a playful yet efficient way.
I’ll explore the technical details of this format (file structure, rendering/animation capabilities, cross-platform compatibility, performance benefits), and how one might create and use a Lava icon.

What Is the Lava Icon Format?

Lava is Airbnb’s new 3D animated icon media format, essentially a lightweight video with an alpha channel (transparent background) optimized for UI icons. It was built to overcome limitations of existing solutions like Lottie (2D vector animations) and conventional video formats.

Photo by on

• File Type & Structure: Lava is a proprietary container for short animated visuals. Airbnb hasn’t publicly disclosed the binary structure, but it “plays like an MP4” in practice(). In other words, a Lava file behaves much like a small video clip. Under the hood, it likely encodes image frames plus transparency (alpha) in a single package. This could involve a conventional video codec paired with a separate alpha mask stream or an innovative frame encoding — Airbnb has even filed a patent for the format(). The content is 3D-rendered iconography (e.g. a tiny house or a hot-air balloon icon) with a transparent background, allowing it to be overlaid seamlessly on any UI backdrop. Each Lava file represents a micro-animation (think a few seconds or a looping sequence) of the icon.
• Rendering & Animation Capabilities: Lava icons support full 32-bit color with transparency, so icons can have soft shadows, glows, and other effects blending into the UI. The format was designed for high visual fidelity and smooth motion — it captures the rich detail of 3D illustrations (lighting, shading, perspective) that flat SVG or Lottie animations can’t easily achieve(). Despite being pre-rendered, Lava animations feel interactive: developers have precise playback control over them (pause, play, seek, sync with UI events, etc.)
• Cross-Platform Compatibility: Lava was engineered to run in Airbnb’s web app and mobile apps without any platform-specific hacks(). To achieve this, Airbnb’s engineering team (led by Ramon Fritsch) created a custom rendering engine for the format. Instead of depending on platform support for exotic formats, they built support directly into the Airbnb apps. For example, web browsers don’t natively handle transparent MP4/WebM videos well (Safari lacks WebM, animated AVIF is buggy, etc.), and mobile platforms have no standard for “video with alpha” in UI. Lava sidesteps this by providing its own decoder/player: the Airbnb web app likely uses a WebAssembly or JavaScript decoder to play Lava files on canvas or WebGL, while the iOS/Android apps bundle a native Lava player module. This guarantees that an icon animation looks and behaves identically whether you’re on an iPhone, Android, or the web. In essence, compatibility is baked into the format’s SDK, not left to the OS or browser.
• Performance and Efficiency: Lava was built with performance in mind, targeting the shortcomings of earlier approaches. Vector animations (Lottie) are resolution-independent and small, but they’re limited to 2D and can choke on complex scenes (lots of drawing commands). Fully interactive 3D (like Spline/WebGL) is powerful but heavy on memory/CPU/GPU and not trivial to integrate into every app screen. Standard video files can offer rich visuals, but historically transparent video support has been poor and file sizes large — for instance, animated AVIF or WebM with alpha either aren’t universally supported or struggle with framerate and decoding efficiency(). Lava tackles these issues head-on. The format is described as “immersive [and] ultra-lightweight”() — meaning the files are highly compressed without noticeable quality loss, and playback is optimized to be silky smooth (60fps) even on mobile devices. Airbnb achieved this by “intelligently” compressing the 3D content(). While details aren’t public, this could involve techniques like delta encoding between frames (to avoid storing redundant data), custom quantization tuned to icon graphics, or leveraging hardware decoding where possible. The payoff is that Lava icons occupy minimal storage and load quickly, yet appear high-definition with rich 3D detail. Unlike an animated GIF or APNG of similar quality (which could be tens of MBs and CPU-heavy), a Lava animation is far more efficient. In short, Lava combines the best of both worlds: the visual richness of prerendered 3D and the lightweight performance of a tailored format. According to one design tech commentator, Lava is “just as universal [as MP4/WebM], but compressed in a way to deliver smooth 3D content without loss”(). And crucially, it maintains an alpha channel on all platforms — something standard formats struggled with — by using Airbnb’s custom player approach.

Key Technical Advantages

How to Create & Run a Lava Icon

1. Design & Render — Model and animate your icon in 3D tools (Blender, Cinema 4D, Maya). Render to a sequence of PNG frames with a transparent background.
2. Export and then Encode to Lava — Once the animation is ready, the next step is to export it in a form that can be encoded to Lava. The designer might render the animation as a sequence of PNG frames with alpha (each frame being, say, 200×200 pixels with transparency) or as a lossless video (e.g. a QuickTime MOV with alpha channel, or a series of PNGs packed). This output serves as the raw material for Lava. (If Airbnb has custom tooling, they might have a direct plugin that exports from the 3D software into Lava, but it’s likely they render to an intermediate first.) It’s crucial that the frames are high quality (no compression artifacts) since the Lava encoder will handle compression optimally.
   With the frames in hand, the Lava encoder tool is used to compress them into the .lava file (assuming the extension is something like .lava).
   For now, this encoder is proprietary, but Airbnb’s team has hinted at open-sourcing the format in the future(). If/when that happens, we can expect an SDK or command-line tool for developers and designers to use. For example, there might be a plug-in for After Effects or Blender that lets you export directly to Lava, similar to how Bodymovin exports Lottie JSON. Note: If you’re eager to experiment before an official release, one analogy is to try encoding a VP9 WebM with alpha or an APNG and see how close you can get — but the real Lava encoder will likely do a better job on size and performance than generic tools.
3. Integrate & Test
   Using a Lava icon in an app would be straightforward once you have Airbnb’s Lava player SDK. Suppose Airbnb publishes a Lava runtime library (for web, iOS, Android); developers could do something like: for web, include a <script> for the Lava player and then use a custom element or API, e.g. <lava-player src="myIcon.lava" autoplay loop></lava-player> in HTML (this is hypothetical, but analogous to how Lottie web players work). The JS library would load the .lava file, decode frames (likely using WebAssembly for speed), and render it to a canvas or <video> element behind the scenes. For mobile (iOS/Android), the SDK might provide a LavaView (iOS UIView / Android View) that you can add to your layout. You’d simply point it to the Lava asset in your app bundle and control it via code. For example, in iOS one might do: let icon = LavaView(named: "myIcon") and add it to the view hierarchy, and perhaps call icon.play() or icon.pause() as needed. Under the hood, this view uses Airbnb’s Lava decoding engine (possibly built in C++ for cross-platform consistency) to draw frames to the screen. Because Lava icons are small and short, memory and CPU use stays low – the runtime might even decode the whole sequence upfront and GPU-accelerate the playback. The key is that no special hardware support or platform-specific format support is required – the SDK handles everything. This means even if you run it “locally” on a development machine or in a simulator, it should work out-of-the-box.
4. Examples & Templates: If open-sourced, I think it’s fair to assume that we can expect Airbnb to provide some sample Lava files and usage examples (similar to how offers free Lottie animations). Designers could use those samples to learn the format’s capabilities.

Imagine a template where you drop in your own 3D model and hit “export to Lava”. Until those tools arrive, the closest analogy is to use existing pipelines: design in 3D, export transparent frames, and maybe use a video encoder that can handle alpha (like FFmpeg with VP9 or a PNG-to-WebM converter) to simulate the process. You won’t get the full efficiency of Lava, but you can approximate the workflow. The real magic will come with Airbnb’s official encoder and player, which should make integrating a 3D animated icon “as simple to integrate as a .jpg”. That means no complex setup — just an asset file and a few lines of code to use it.

Brief Design Rationale

Airbnb’s push for Lava was driven by a desire to make the app feel “fun, alive and simple” while remaining intuitive; according to Airbnb’s VP of Design()— animated icons that delight users while maintaining snappy performance. By controlling both the format and the playback engine, Airbnb ensures every animated icon looks polished and performs reliably.

Conclusion

LAVA icons Airbnb

I’m genuinely excited for what’s next. Once Airbnb makes the Lava encoder and runtime open-source; can’t wait to see folks start building and swapping lightweight Lava icons that anyone can plug into their projects.