Home/Libraries/Fluent Emoji (Iconify)/melon

Fluent Emoji (Iconify)

Melon

License: MITCommercial Safe

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><mask id="ijv8zyb" width="12" height="12" x="4" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha; color: #818cf8"><path d="M5.463 1.06a.5.5 0 1 0-.926.38c.443 1.08 1.067 1.795 2.085 1.98c.755.138 1.659-.034 2.746-.404l3.168 7.92a.5.5 0 1 0 .928-.372L10.306 2.67l2.054-.764c.376-.141 1.309.065 1.874 1.247a.5.5 0 1 0 .902-.432c-.704-1.473-2.1-2.135-3.125-1.753l-2.185.813l-.008.003c-1.464.573-2.388.767-3.017.653c-.546-.1-.962-.457-1.338-1.377"/></mask><g fill="none"><path fill="url(#imUghrc)" d="M5.463 1.06a.5.5 0 1 0-.926.38c.443 1.08 1.067 1.795 2.085 1.98c.755.138 1.659-.034 2.746-.404l3.168 7.92a.5.5 0 1 0 .928-.372L10.306 2.67l2.054-.764c.376-.141 1.309.065 1.874 1.247a.5.5 0 1 0 .902-.432c-.704-1.473-2.1-2.135-3.125-1.753l-2.185.813l-.008.003c-1.464.573-2.388.767-3.017.653c-.546-.1-.962-.457-1.338-1.377"/><g filter="url(#i0WNVNb)" mask="url(#ijv8zyb)"><path stroke="url(#igB6Tae)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 1.25c.82 2 1.738 2.24 4.66 1.097m0 0l2.525-.91c.7-.262 1.865.172 2.5 1.5m-5.025-.59l1.82 4.746"/></g><circle cx="16" cy="18" r="12" fill="url(#iqKlCnd)"/><circle cx="16" cy="18" r="12" fill="url(#iW1rMLb)"/><circle cx="16" cy="18" r="12" fill="url(#iJqnmoc)"/><circle cx="16" cy="18" r="12" fill="url(#ioDVxId)"/><path fill="url(#iKL8byc)" fill-opacity=".6" fill-rule="evenodd" d="M22.93 15.13c-3.062-7.391-7.444-8.823-7.444-8.823s5.305 1.05 8.367 8.44c3.061 7.391.052 11.885.052 11.885s2.086-4.111-.976-11.502m-7.392 3.061c-3.061-7.39-4.13-11.278-4.13-11.278s1.992 3.505 5.054 10.896c3.061 7.39 4.13 11.278 4.13 11.278S18.6 25.582 15.538 18.19M8.095 9.368s-3.01 4.494.052 11.885c3.062 7.39 8.367 8.44 8.367 8.44s-4.382-1.432-7.443-8.823s-.976-11.502-.976-11.502" clip-rule="evenodd"/><defs><radialGradient id="iqKlCnd" cx="0" cy="0" r="1" gradientTransform="rotate(150.814 8.962 9.721)scale(19.0917)" gradientUnits="userSpaceOnUse"><stop stop-color="#DFFF9E"/><stop offset=".49" stop-color="#BCD088"/><stop offset="1" stop-color="#9FB672"/></radialGradient><radialGradient id="iW1rMLb" cx="0" cy="0" r="1" gradientTransform="rotate(69.542 -2.33 16.343)scale(16.6758)" gradientUnits="userSpaceOnUse"><stop offset=".625" stop-color="#9F00C1" stop-opacity="0"/><stop offset="1" stop-color="#9F00C1" stop-opacity=".16"/></radialGradient><radialGradient id="iJqnmoc" cx="0" cy="0" r="1" gradientTransform="matrix(7.32843 20.87415 -24.25486 8.51532 13.797 12.814)" gradientUnits="userSpaceOnUse"><stop offset=".653" stop-color="#886B91" stop-opacity="0"/><stop offset=".754" stop-color="#886B91" stop-opacity=".32"/><stop offset=".835" stop-color="#886C91"/></radialGradient><radialGradient id="ioDVxId" cx="0" cy="0" r="1" gradientTransform="rotate(80.2 -3.03 18.471)scale(13.9536)" gradientUnits="userSpaceOnUse"><stop offset=".817" stop-color="#A0C674" stop-opacity="0"/><stop offset=".941" stop-color="#7FA94F"/></radialGradient><linearGradient id="imUghrc" x1="4.5" x2="14.914" y1="1.02" y2="3.418" gradientUnits="userSpaceOnUse"><stop stop-color="#644234"/><stop offset="1" stop-color="#453123"/></linearGradient><linearGradient id="igB6Tae" x1="4.921" x2="14.873" y1="1.198" y2="3.035" gradientUnits="userSpaceOnUse"><stop stop-color="#8D6251"/><stop offset="1" stop-color="#705146"/></linearGradient><linearGradient id="iKL8byc" x1="11.333" x2="20.483" y1="6.892" y2="28.636" gradientUnits="userSpaceOnUse"><stop stop-color="#98AA5F"/><stop offset=".5" stop-color="#BFCE82"/><stop offset="1" stop-color="#ADA581"/></linearGradient><filter id="i0WNVNb" width="10.786" height="6.943" x="4.45" y=".7" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_29706" stdDeviation=".2"/></filter></defs></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. MelonIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.