DevelopersSVG · React · Flutter

Use it in your product

Every sticker is drawn as SVG. The Code menu in the library turns the sticker you are looking at, with your colours, into markup, a React component or a Flutter widget. Nothing to install from us.

The examples below are the real output for Love Glossy heart in its default colours. Open it in the library to change it and copy the full code.

How to get the code

Open a sticker in the library and set its colours, details and outline.
Choose Code, then SVG, React or Flutter. The code is copied to your clipboard.
Paste it into a file in your project. The suggested file names are shown below.

The copied code always matches the preview, including any colour you picked.

SVG

Clean, optimised markup with a viewBox and an accessible <title>. Save it as love-glossy-heart.svg, inline it in HTML, or use it as an image source.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" fill="none" role="img">
  <title>Love Glossy heart</title>
  <defs>
    <linearGradient id="lvuobiyos-heart" x1="0.2" y1="0" x2="0.8" y2="1">
      <stop offset="0" stop-color="#EF7990"/>
      <stop offset="0.5" stop-color="#E4183F"/>
      <stop offset="1" stop-color="#9B102B"/>
    </linearGradient>
    <radialGradient id="lvuobiyos-heartGlow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0.3" stop-color="#EB526F" stop-opacity="0.5"/>
      <stop offset="1" stop-color="#E4183F" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="lvuobiyos-heart2" x1="0.2" y1="0" x2="0.8" y2="1">
      <stop offset="0" stop-color="#F5A7B6"/>
      <stop offset="1" stop-color="#E94262"/>
    </linearGradient>
    <linearGradient id="lvuobiyos-petal" x1="0.3" y1="0" x2="0.6" y2="1">
      <stop offset="0" stop-color="#EE5A79"/>
      <stop offset="0.55" stop-color="#E8264F"/>
      <stop offset="1" stop-color="#A71B39"/>
    </linearGradient>
    <linearGradient id="lvuobiyos-petalDeep" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#D52349"/>
      <stop offset="1" stop-color="#901831"/>
    </linearGradient>
    <linearGradient id="lvuobiyos-leaf" x1="0" y1="0" x2="1" y2="1">

First 26 lines of 91. Copy the full markup from the library.

You can change: viewBox, width, height, color.

React

A typed TSX component with no dependencies beyond React. It works in Server Components. Save it as LoveGlossyHeartSticker.tsx.

import type { SVGProps } from "react";

export type LoveGlossyHeartStickerProps = Omit<SVGProps<SVGSVGElement>, "color"> & {
  /** Width and height: a number (px) or any CSS length. */
  size?: number | string;
  /** Ink colour (the SVG's currentColor). */
  color?: string;
  /** Accessible name. Pass "" when the graphic is purely decorative. */
  title?: string;
};

export function LoveGlossyHeartSticker({
  size = 512,
  color = "currentColor",
  title = "Love Glossy heart",
  className,
  style,
  ...props
}: LoveGlossyHeartStickerProps) {
  const decorative = title === "";

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      width={size}

First 26 lines of 129.

Using it

import { LoveGlossyHeartSticker } from "./LoveGlossyHeartSticker";

export function Welcome() {
  return (
    <>
      <LoveGlossyHeartSticker size={96} />
      {/* Decorative: hide it from screen readers */}
      <LoveGlossyHeartSticker size="4rem" title="" />
    </>
  );
}

Prop	What it does
`size`	Width and height. A number in pixels or any CSS length.
`color`	Ink colour for artwork drawn with `currentColor` (the flat icons). Full-colour stickers keep the colours you chose on the site.
`title`	Accessible name. Pass an empty string when the sticker is decorative.
`className`, other SVG props	Passed through to the `<svg>` element.

Flutter

A StatelessWidget built on the flutter_svg package. The drawing is exported without SVG filters, which flutter_svg does not render. Add the package first:

flutter pub add flutter_svg

Then save the widget as love_glossy_heart_sticker.dart:

// Requires the flutter_svg package:
//   flutter pub add flutter_svg

import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

/// Love Glossy heart from Stickimo. Ink lines follow [color].
class LoveGlossyHeartSticker extends StatelessWidget {
  const LoveGlossyHeartSticker({
    super.key,
    this.size = 512,
    this.color = const Color(0xFF1C1B22),
    this.semanticsLabel = 'Love Glossy heart',
  });

  final double size;
  final Color color;
  final String? semanticsLabel;

  static const String svg = r'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none"><defs><linearGradient id="lv5ip0qds-heart" x1="0.2" y1="0" x2="0.8" y2="1"><stop offset="0" stop-color="#EF7990"/><stop offset="0.5" stop-color="#E4183F"/><stop offset="1" stop-color="#9B102B"/></linearGradient><radialGradient id="lv5ip0qds-heartGlow" cx="0.5" cy="0.5" r="0.5"><stop offset="0.3" stop-color="#EB526F" stop-opacity="0.5"/><stop offset="1" stop-color="#E4183F" stop-opacity="0"/></radialGradient><linearGradient id="lv5ip0qds-heart2" x1="0.2" y1="0" x2="0.8" y2="1"><stop offset="0" stop-color="#F5A7B6"/><stop offset="1" stop-color="#E94262"/></linearGradient><linearGradient id="lv5ip0qds-petal" x1="0.3" y1="0" x2="0.6" y2="1"><stop offset="0" stop-color="#EE5A79"/><stop offset="0.55" stop-color="#E8264F"/><stop offset="1" stop-color="#A71B39"/></linearGradient><linearGradient id="lv5ip0qds-petalDeep" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#D52349"/><stop offset="1" stop-color="#901831"/></linearGradient><linearGradient id="lv5ip0qds-leaf" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6CCB72"/><stop offset="1" stop-color="#2E8B4A"/></linearGradient><linearGradient id="lv5ip0qds-paper" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F3E3C8"/><stop offset="1" stop-color="#D9BE92"/></linearGradient><linearGradient id="lv5ip0qds-gold" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFE08A"/><stop offset="1" stop-color="#D9A228"/></linearGradient><radialGradient id="lv5ip0qds-fur" cx="0.42" cy="0.3" r="0.8"><stop offset="0" stop-color="#F28C9F"/><stop offset="0.6" stop-color="#E4183F"/><stop offset="1" stop-color="#C01435"/></radialGradient><radialGradient id="lv5ip0qds-muzzle" cx="0.5" cy="0.45" r="0.55"><stop offset="0" stop-color="#F8C3CD"/><stop offset="0.7" stop-color="#F8C3CD" stop-opacity="0.85"/><stop offset="1" stop-color="#F8C3CD" stop-opacity="0"/></radialGradient><radialGradient id="lv5ip0qds-iris" cx="0.5" cy="0.62" r="0.55"><stop offset="0" stop-color="#A6A09D"/><stop offset="0.55" stop-color="#3A2C26"/><stop offset="1" stop-color="#1A1411"/></radialGradient><linearGradient id="lv5ip0qds-nose" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#F5B3BF"/><stop offset="1" stop-color="#D37989"/></linearGradient><radialGradient id="lv5ip0qds-ear" cx="0.45" cy="0.75" r="0.75"><stop offset="0" stop-color="#F9C3CC"/><stop offset="1" stop-color="#F6A9B6"/></radialGradient><linearGradient id="lv5ip0qds-glass" x1="0.1" y1="0" x2="0.9" y2="1"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.8"/><stop offset="0.5" stop-color="#EAF4FF" stop-opacity="0.25"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0.6"/></linearGradient><radialGradient id="lv5ip0qds-blush" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#FF6F86" stop-opacity="0.65"/><stop offset="0.6" stop-color="#FF8A9E" stop-opacity="0.28"/><stop offset="1" stop-color="#FF8A9E" stop-opacity="0"/></radialGradient><radialGradient id="lv5ip0qds-glow" cx="0.5" cy="0.45" r="0.5"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.42"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient><linearGradient id="lv5ip0qds-tear" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#EAF7FF"/><stop offset="1" stop-color="#6FB8FF"/></linearGradient></defs><g transform="rotate(-6 256 276)"><circle data-part="glow" cx="256" cy="276" r="232.3" fill="url(#lv5ip0qds-heartGlow)"/><path d="M256 437.9C227.8 416.8 80 321.8 80 223.2C80 142.2 146.9 100 197.9 100C233.1 100 256 124.6 256 163.4C256 124.6 278.9 100 314.1 100C365.1 100 432 142.2 432 223.2C432 321.8 284.2 416.8 256 437.9Z" fill="url(#lv5ip0qds-heart)" stroke="#840E25" stroke-opacity="0.55" stroke-width="6.2" stroke-linejoin="round"/><ellipse cx="175" cy="188" rx="45.8" ry="28.2" fill="#FFFFFF" opacity="0.35" transform="rotate(-38 175 188)"/><path d="M132.8 219.7C129.3 166.9 164.5 131.7 206.7 135.2" stroke="#FFFFFF" stroke-width="13.2" stroke-linecap="round" opacity="0.9"/><circle cx="344" cy="173.9" r="10.6" fill="#FFFFFF" opacity="0.8"/><path d="M393.3 269C372.2 328.8 319.4 374.6 277.1 402.7" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" opacity="0.25"/></g><path d="M424 90Q427.6 106.4 444 110Q427.6 113.6 424 130Q420.4 113.6 404 110Q420.4 106.4 424 90Z" fill="#FFD45C"/><path d="M92 118Q94.2 127.8 104 130Q94.2 132.2 92 142Q89.8 132.2 80 130Q89.8 127.8 92 118Z" fill="#FFB8CC"/><path d="M430 410Q431.8 418.2 440 420Q431.8 421.8 430 430Q428.2 421.8 420 420Q428.2 418.2 430 410Z" fill="#FFD45C"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return SvgPicture.string(
      svg,
      width: size,

First 26 lines of 32.

You can change: size, color, semanticsLabel.

Image formats

Format	Sizes	Notes
PNG	256, 512, 1024 px	Transparent background, optional white outline.
WebP	256, 512, 1024 px	Transparent. Needs a browser that can encode WebP; if yours cannot, the site says so and saves nothing.
SVG	Any	The vector source. The outline option applies to images only.
WhatsApp sticker	512 × 512 px	Transparent WebP kept under 100 KB.
Telegram sticker	512 × 512 px	Transparent PNG.

Stickers in WhatsApp and Telegram

The quick way: choose Copy sticker, then paste into the chat. It is sent as an image.

As a real sticker in WhatsApp: download the WhatsApp sticker file. It meets WhatsApp’s rules for a static sticker (512 × 512, transparent WebP, under 100 KB). WhatsApp only adds sticker packs through a sticker-maker app on your phone, or its own “Create sticker” option, so import the file there. Stickimo cannot install a pack into WhatsApp for you, and a downloaded file is not a pack on its own.

In Telegram: download the Telegram sticker file and send it to the official @Stickers bot to add it to a pack you own.

Licence

Read the licence before you ship. Questions: namesiddik@gmail.com.

Back to Stickimo