Is the handshake: medium-dark skin tone, medium-light skin tone Lottie free to use commercially?

Yes. Google Noto Emoji Animation is published under the Apache License 2.0. You may use, modify, and redistribute the animation in personal and commercial work — just preserve attribution and the license text where the source is bundled.

Where exactly does the animation come from?

Every frame is served directly from Google's CDN at https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json. We do not mirror or modify the file — the browser fetches it from fonts.gstatic.com on demand. If Google updates the animation, your site picks up the new version automatically.

Can I use this Lottie without lottie-web?

Yes. Any Bodymovin-compatible renderer works: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. The file format is plain Lottie JSON v5.8.1, so embed-vendor lock-in is zero.

DBEmoji

Noto Lottie

Unicode original

handshake: medium-dark skin tone, medium-light skin tone

People & Body entry: Handshake: medium-dark skin tone, medium-light skin tone.

Handshake: medium-dark skin tone, medium-light skin tone (🫱🏾‍🫲🏼) is part of Google Noto Emoji Animation: a vector Lottie animation that scales sharply at any size and stays under 100 KB on the wire. The Unicode codepoint is U+1FAF1 U+1F3FE U+200D U+1FAF2 U+1F3FC.

The Lottie carries the same semantic meaning as 🫱🏾‍🫲🏼: People & Body entry: Handshake: medium-dark skin tone, medium-light skin tone. The animation just makes the moment land harder.

Where the animated handshake: medium-dark skin tone, medium-light skin tone works best

Landing page hero or feature highlight — replace a static SVG hero with the animated handshake: medium-dark skin tone, medium-light skin tone to add motion without a video file.
Empty / success / error states — pair the animation with copy like "All done!" or "Nothing here yet" so the page never feels static.
Chat reactions and stickers — render the Lottie at 64–128 px inside messaging UIs; smaller than a GIF and crisper at any DPR.
Onboarding and tooltip illustrations — use the loop as a focal point while explaining a feature; ~1.2 s loop matches typical attention spans.
Marketing copy and social cards — embed the animation in blog posts, changelog entries, and product announcements where a static emoji feels flat.

Embed Handshake: medium-dark skin tone, medium-light skin tone into your project

Pick the snippet that matches your stack. Every snippet points at the same Lottie JSON on Google's CDN — no asset hosting required.

Lottie JSON URL

Plain URL. Drop into any Lottie-compatible renderer.

https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json

<lottie-player> web component

Zero-build HTML. Works in any modern browser.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
  src="https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>

HTML + lottie-web (CDN)

Manual loadAnimation() call. Full control over loop, speed, segments.

<div id="lottie-handshake-medium-dark-skin-tone-medium-light-skin-tone-1faf1-1f3fe-200d-1faf2-1f3fc" style="width:160px;height:160px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie-handshake-medium-dark-skin-tone-medium-light-skin-tone-1faf1-1f3fe-200d-1faf2-1f3fc"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json"
  });
</script>

React + lottie-react

TypeScript component. Fetches the JSON on mount.

import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function HandshakeMediumDarkSkinToneMediumLightSkinTone1faf11f3fe200d1faf21f3fc() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json").then((r) => r.json()).then(setData);
  }, []);
  if (!data) return null;
  return (
    <Lottie
      animationData={data}
      loop
      autoplay
      style={{ width: 160, height: 160 }}
    />
  );
}

Best practices

Render at 1× or 2× device pixel ratio (DPR) — the source is 1024 px, so any size up to 256 px stays razor-sharp.
Lazy-load below the fold. lottie-web ships ~50 KB gzipped on its own; defer instantiation until the player is on screen.
Respect prefers-reduced-motion. Pause autoplay and render the Unicode character 🫱🏾‍🫲🏼 or the static Noto PNG as a fallback.
Cache the JSON in your CDN. Google's gstatic copy is already on the global edge, but a same-origin proxy keeps requests on the same connection.
Do not edit the Lottie file. Google ships canonical animations and updates them in place — patch with overlays or color filters instead.

Animated emoji FAQ

Is the handshake: medium-dark skin tone, medium-light skin tone Lottie free to use commercially?: Yes. Google Noto Emoji Animation is published under the Apache License 2.0. You may use, modify, and redistribute the animation in personal and commercial work — just preserve attribution and the license text where the source is bundled.
Where exactly does the animation come from?: Every frame is served directly from Google's CDN at https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json. We do not mirror or modify the file — the browser fetches it from fonts.gstatic.com on demand. If Google updates the animation, your site picks up the new version automatically.
Can I use this Lottie without lottie-web?: Yes. Any Bodymovin-compatible renderer works: lottie-web, lottie-react, Lottie iOS/Android, Skottie, dotLottie. The file format is plain Lottie JSON v5.8.1, so embed-vendor lock-in is zero.

Source de l’asset

Lottie URL: https://fonts.gstatic.com/s/e/notoemoji/latest/1faf1_1f3fe_200d_1faf2_1f3fc/lottie.json
Points de code: U+1FAF1 U+1F3FE U+200D U+1FAF2 U+1F3FC
Format: Bodymovin Lottie · 60fps · 1024×1024
Licence: Apache 2.0 · Google Noto

Animation source: Google Noto Emoji Animation (Apache License 2.0). Hosted by Google on fonts.gstatic.com.

waving hand

raised back of hand

hand with fingers splayed