Thumbs up

Add to your project

Add the "Thumbs up" animated icon (id: thumbs-up) from Generative Icons by LottieFiles to this project.

1. Look at the project first: framework, package manager, and where static assets are served. In a monorepo, target the app that needs the icon.
2. Install the runtime: `npm install @lottiefiles/generative-icons-runtime`. For React or Next.js, also install `@lottiefiles/generative-icons-react`. Use the project's package manager.
3. Run `npx generative-icons init`, then `npx generative-icons add thumbs-up`. Follow the agent skill that init writes to `.agents/skills/generative-icons/` (and `.claude/skills/generative-icons/`). Commit `generative-icons.json`, the copied files and `.generative-icons/lock.json`.
4. Render the icon with these settings: color #ffffff, style outline, weight 2, motion light, theme dark. In React, use `<AnimatedIcon icon={icon} src={src} size={24} color="#ffffff" variant="outline" weight={2} motion="light" theme="dark" />` inside a `'use client'` component. Otherwise use `createIcon(canvas, { icon, src, ... })` from `@lottiefiles/generative-icons-runtime` and call `destroy()` when the element is removed.
5. Play it on the interaction it belongs to (click, hover or confirmation). The icon is decorative, so the parent control needs an accessible label. Reduced motion is handled by the runtime.
6. If this is a native iOS or Android app instead, download https://generativeicons.com/assets/thumbs-up.lottie and play it with the dotLottie player for that platform.

Guide: https://generativeicons.com/docs-md/using-packages.md
Library overview for agents: https://generativeicons.com/llms.txt

Paste it into Claude Code, Cursor or another coding agent, opened in your project.

Install

npm install @lottiefiles/generative-icons-runtime @lottiefiles/generative-icons-react
npx generative-icons init
npx generative-icons add thumbs-up

Use

'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/thumbs-up.mjs';

export function ThumbsUpIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}

Install

npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add thumbs-up

Use

import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/thumbs-up.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();

Install

npx generative-icons init
npx generative-icons add thumbs-up

Use

// Swift Package: github.com/LottieFiles/dotlottie-ios
// Add thumbs-up.lottie (Download .lottie) to your app target.
import SwiftUI
import DotLottie

struct ThumbsUpIcon: View {
  @State private var icon = makeIcon("thumbs-up", animation: "thumbs-up")

  var body: some View {
    icon.view()
      .frame(width: 32, height: 32)
      .onTapGesture { icon.play() }
  }
}

func makeIcon(_ file: String, animation: String) -> DotLottieAnimation {
  var config = AnimationConfig()
  config.animationId = animation
  let icon = DotLottieAnimation(fileName: file, config: config)
  icon.subscribe(observer: IconPaint(icon))
  return icon
}

// Applies color and style once per load (loading an animation resets slots).
// Set slots here rather than through a theme, and create a new icon to change
// them later: the current core can crash when a set slot is changed again.
final class IconPaint: Observer {
  weak var icon: DotLottieAnimation?
  init(_ icon: DotLottieAnimation) { self.icon = icon }

  func onLoad() {
    icon?.setColorSlot(slotId: "color.primary", r: 1, g: 1, b: 1)
  }
  func onLoadError() {}
  func onPlay() {}
  func onPause() {}
  func onStop() {}
  func onFrame(frameNo: Float) {}
  func onRender(frameNo: Float) {}
  func onLoop(loopCount: UInt32) {}
  func onComplete() {}
}

Install

npx generative-icons init
npx generative-icons add thumbs-up

Use

// build.gradle.kts: implementation("com.lottiefiles:dotlottie-android:0.16.0")
// Put thumbs-up.lottie (Download .lottie) in src/main/assets/.
import android.graphics.Color
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.lottiefiles.dotlottie.core.compose.runtime.DotLottieController
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieEventListener
import com.lottiefiles.dotlottie.core.util.DotLottieSource

@Composable
fun ThumbsUpIcon() {
  val controller = remember { DotLottieController() }
  DotLottieAnimation(
    modifier = Modifier.size(32.dp).clickable { controller.play() },
    source = DotLottieSource.Asset("thumbs-up.lottie"),
    controller = controller,
    // Color and style are set once per load, not through a theme: the current
    // core can crash when a slot that is already set is changed again.
    eventListeners = listOf(object : DotLottieEventListener {
      override fun onLoad() {
        // The file opens on Strong; loading Light fires onLoad again.
        if (controller.activeAnimationId == "thumbs-up-strong") {
          controller.loadAnimation("thumbs-up")
          return
        }
        controller.setColorSlot("color.primary", Color.parseColor("#ffffff"))
      }
    })
  )
}

.lottie

Thumbs up

Add to your project

More in Emoji