Style
ColorHex value, for example #00ddb3
Face blowing a kiss
Add to your project
Installation guideAdd the "Face blowing a kiss" animated icon (id: face-blowing-a-kiss) 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 face-blowing-a-kiss`. 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/face-blowing-a-kiss.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.txtPaste 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 face-blowing-a-kissUse
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/face-blowing-a-kiss.mjs';
export function FaceBlowingAKissIcon() {
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 face-blowing-a-kissUse
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/face-blowing-a-kiss.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 face-blowing-a-kissUse
// Swift Package: github.com/LottieFiles/dotlottie-ios
// Add face-blowing-a-kiss.lottie (Download .lottie) to your app target.
import SwiftUI
import DotLottie
struct FaceBlowingAKissIcon: View {
@State private var icon = makeIcon("face-blowing-a-kiss", animation: "face-blowing-a-kiss")
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 face-blowing-a-kissUse
// build.gradle.kts: implementation("com.lottiefiles:dotlottie-android:0.16.0")
// Put face-blowing-a-kiss.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 FaceBlowingAKissIcon() {
val controller = remember { DotLottieController() }
DotLottieAnimation(
modifier = Modifier.size(32.dp).clickable { controller.play() },
source = DotLottieSource.Asset("face-blowing-a-kiss.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 == "face-blowing-a-kiss-strong") {
controller.loadAnimation("face-blowing-a-kiss")
return
}
controller.setColorSlot("color.primary", Color.parseColor("#ffffff"))
}
})
)
}