@jstnmthw/react-fluentui-emoji/icons/GrimacingFaceIcon.jsx

Fluent Emoji SVG icons for UI react development.

const React = require("react");
const GrimacingFaceIcon = ({ title, titleId, ...props }) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-labelledby={titleId}
    {...props}
  >
    {title ? <title id={titleId}>{title}</title> : null}
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint0_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint1_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint2_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint3_radial_30_60)"
      fillOpacity={0.6}
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint4_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint5_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint6_radial_30_60)"
    />
    <path
      d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
      fill="url(#paint7_radial_30_60)"
    />
    <circle cx={9} cy={13} r={5} fill="url(#paint8_radial_30_60)" />
    <circle cx={19.5} cy={13.5} r={4.5} fill="url(#paint9_radial_30_60)" />
    <path
      d="M10.5 16C12.9853 16 15 13.9853 15 11.5C15 9.01472 12.9853 7 10.5 7C8.01472 7 6 9.01472 6 11.5C6 13.9853 8.01472 16 10.5 16Z"
      fill="white"
    />
    <path
      d="M21.5 16C23.9853 16 26 13.9853 26 11.5C26 9.01472 23.9853 7 21.5 7C19.0147 7 17 9.01472 17 11.5C17 13.9853 19.0147 16 21.5 16Z"
      fill="white"
    />
    <path
      d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
      fill="url(#paint10_linear_30_60)"
    />
    <path
      d="M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z"
      fill="url(#paint11_linear_30_60)"
    />
    <rect
      x={8}
      y={19}
      width={16}
      height={6}
      rx={3}
      fill="url(#paint12_radial_30_60)"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M23 19.7639V20.5C23 21.0523 22.5523 21.5 22 21.5H10C9.44772 21.5 9 21.0523 9 20.5V19.7639C9.53076 19.2889 10.2316 19 11 19H21C21.7684 19 22.4692 19.2889 23 19.7639Z"
      fill="url(#paint13_radial_30_60)"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M23 19.7639V20.5C23 21.0523 22.5523 21.5 22 21.5H10C9.44772 21.5 9 21.0523 9 20.5V19.7639C9.53076 19.2889 10.2316 19 11 19H21C21.7684 19 22.4692 19.2889 23 19.7639Z"
      fill="url(#paint14_linear_30_60)"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M23 24.2361C22.4692 24.7111 21.7684 25 21 25H11C10.2316 25 9.53076 24.7111 9 24.2361V23.5C9 22.9477 9.44772 22.5 10 22.5H22C22.5523 22.5 23 22.9477 23 23.5V24.2361Z"
      fill="url(#paint15_radial_30_60)"
    />
    <defs>
      <radialGradient
        id="paint0_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(25.5 9) rotate(132.839) scale(37.5033)"
      >
        <stop stopColor="#FFF478" />
        <stop offset={0.474827} stopColor="#FFB02E" />
        <stop offset={1} stopColor="#F70A8D" />
      </radialGradient>
      <radialGradient
        id="paint1_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(25.5 9) rotate(131.878) scale(38.9487)"
      >
        <stop stopColor="#FFF478" />
        <stop offset={0.474827} stopColor="#FFB02E" />
        <stop offset={1} stopColor="#F70A8D" />
      </radialGradient>
      <radialGradient
        id="paint2_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(16 12.5) rotate(101.31) scale(17.8466 22.8581)"
      >
        <stop offset={0.787821} stopColor="#F59639" stopOpacity={0} />
        <stop offset={0.972509} stopColor="#FF7DCE" />
      </radialGradient>
      <radialGradient
        id="paint3_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(18 14) rotate(135) scale(41.0122)"
      >
        <stop offset={0.314853} stopOpacity={0} />
        <stop offset={1} />
      </radialGradient>
      <radialGradient
        id="paint4_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(16 17) rotate(77.692) scale(28.1469)"
      >
        <stop offset={0.507903} stopColor="#7D6133" stopOpacity={0} />
        <stop offset={1} stopColor="#715B32" />
      </radialGradient>
      <radialGradient
        id="paint5_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(16.5 16.5) rotate(55.7131) scale(13.3135 9.65032)"
      >
        <stop stopColor="#FFB849" />
        <stop offset={1} stopColor="#FFB847" stopOpacity={0} />
      </radialGradient>
      <radialGradient
        id="paint6_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(20.5 18) rotate(9.86581) scale(11.6726)"
      >
        <stop stopColor="#FFA64B" />
        <stop offset={0.900412} stopColor="#FFAE46" stopOpacity={0} />
      </radialGradient>
      <radialGradient
        id="paint7_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(17.5 15) rotate(43.9708) scale(59.0529)"
      >
        <stop offset={0.185425} stopOpacity={0} />
        <stop offset={1} stopOpacity={0.4} />
      </radialGradient>
      <radialGradient
        id="paint8_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(12.8889 9.11111) rotate(135) scale(9.74236 5.04232)"
      >
        <stop stopColor="#392108" />
        <stop offset={1} stopColor="#C87928" stopOpacity={0} />
      </radialGradient>
      <radialGradient
        id="paint9_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(23 10) rotate(135) scale(8.13173 4.59049)"
      >
        <stop stopColor="#392108" />
        <stop offset={1} stopColor="#C87928" stopOpacity={0} />
      </radialGradient>
      <linearGradient
        id="paint10_linear_30_60"
        x1={20.6154}
        y1={10}
        x2={19.9265}
        y2={14.0302}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#553B3E" />
        <stop offset={1} stopColor="#3D2432" />
      </linearGradient>
      <linearGradient
        id="paint11_linear_30_60"
        x1={20.6154}
        y1={10}
        x2={19.9265}
        y2={14.0302}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#553B3E" />
        <stop offset={1} stopColor="#3D2432" />
      </linearGradient>
      <radialGradient
        id="paint12_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(16 25) rotate(-90) scale(7.5 20)"
      >
        <stop stopColor="#F70A8D" />
        <stop offset={1} stopColor="#89029C" />
      </radialGradient>
      <radialGradient
        id="paint13_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(20.2778 18) rotate(141.546) scale(8.44211 8.28716)"
      >
        <stop stopColor="white" />
        <stop offset={1} stopColor="#ECCDFF" />
      </radialGradient>
      <linearGradient
        id="paint14_linear_30_60"
        x1={16}
        y1={21}
        x2={16}
        y2={21.75}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#E181F4" stopOpacity={0} />
        <stop offset={1} stopColor="#E181F4" />
      </linearGradient>
      <radialGradient
        id="paint15_radial_30_60"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(20.2778 21.5) rotate(141.546) scale(8.44211 8.28716)"
      >
        <stop stopColor="white" />
        <stop offset={1} stopColor="#ECCDFF" />
      </radialGradient>
    </defs>
  </svg>
);
module.exports = GrimacingFaceIcon;