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

Fluent Emoji SVG icons for UI react development.

const React = require("react");
const NextTrackButtonIcon = ({ 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}
    <g filter="url(#filter0_ii_18590_1391)">
      <rect
        x={1.85529}
        y={1.9375}
        width={27.875}
        height={27.875}
        rx={3.6}
        fill="url(#paint0_linear_18590_1391)"
      />
      <rect
        x={1.85529}
        y={1.9375}
        width={27.875}
        height={27.875}
        rx={3.6}
        fill="url(#paint1_radial_18590_1391)"
      />
    </g>
    <g filter="url(#filter1_f_18590_1391)">
      <path
        d="M28.0428 4.4375V27.3125"
        stroke="url(#paint2_linear_18590_1391)"
        strokeWidth={1.5}
        strokeLinecap="round"
      />
    </g>
    <g filter="url(#filter2_f_18590_1391)">
      <path
        d="M5.31915 3.75H27.1004"
        stroke="url(#paint3_linear_18590_1391)"
        strokeWidth={1.5}
        strokeLinecap="round"
      />
    </g>
    <g filter="url(#filter3_f_18590_1391)">
      <path
        d="M14.7928 16.903C14.7928 16.8875 14.7803 16.875 14.7648 16.875V16.875C14.7576 16.875 14.7506 16.8778 14.7454 16.8828L8.48616 22.9058C7.85086 23.5171 6.79279 23.0669 6.79279 22.1852L6.79279 9.56474C6.79279 8.68308 7.85086 8.23284 8.48616 8.84416L14.7455 14.8672C14.7507 14.8722 14.7576 14.875 14.7649 14.875V14.875C14.7803 14.875 14.7928 14.8625 14.7928 14.8471V9.56474C14.7928 8.68308 15.8509 8.23284 16.4862 8.84416L22.7455 14.8672C22.7507 14.8722 22.7576 14.875 22.7648 14.875V14.875C22.7803 14.875 22.7928 14.8625 22.7928 14.8471V9.37496C22.7928 9.09882 23.0166 8.87496 23.2928 8.87496H24.2928C24.5689 8.87496 24.7928 9.09882 24.7928 9.37496V22.375C24.7928 22.6511 24.5689 22.875 24.2928 22.875H23.2928C23.0166 22.875 22.7928 22.6511 22.7928 22.375V16.903C22.7928 16.8875 22.7803 16.875 22.7648 16.875V16.875C22.7576 16.875 22.7506 16.8778 22.7454 16.8828L16.4862 22.9058C15.8509 23.5171 14.7928 23.0669 14.7928 22.1852V16.903Z"
        fill="#579FFF"
      />
    </g>
    <g filter="url(#filter4_ii_18590_1391)">
      <path
        d="M14.7928 16.903C14.7928 16.8875 14.7803 16.875 14.7648 16.875V16.875C14.7576 16.875 14.7506 16.8778 14.7454 16.8828L8.48616 22.9058C7.85086 23.5171 6.79279 23.0669 6.79279 22.1852L6.79279 9.56474C6.79279 8.68308 7.85086 8.23284 8.48616 8.84416L14.7455 14.8672C14.7507 14.8722 14.7576 14.875 14.7649 14.875V14.875C14.7803 14.875 14.7928 14.8625 14.7928 14.8471V9.56474C14.7928 8.68308 15.8509 8.23284 16.4862 8.84416L22.7455 14.8672C22.7507 14.8722 22.7576 14.875 22.7648 14.875V14.875C22.7803 14.875 22.7928 14.8625 22.7928 14.8471V9.37496C22.7928 9.09882 23.0166 8.87496 23.2928 8.87496H24.2928C24.5689 8.87496 24.7928 9.09882 24.7928 9.37496V22.375C24.7928 22.6511 24.5689 22.875 24.2928 22.875H23.2928C23.0166 22.875 22.7928 22.6511 22.7928 22.375V16.903C22.7928 16.8875 22.7803 16.875 22.7648 16.875V16.875C22.7576 16.875 22.7506 16.8778 22.7454 16.8828L16.4862 22.9058C15.8509 23.5171 14.7928 23.0669 14.7928 22.1852V16.903Z"
        fill="#FCF2FF"
      />
    </g>
    <defs>
      <filter
        id="filter0_ii_18590_1391"
        x={1.85529}
        y={0.9375}
        width={28.875}
        height={28.875}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={1} dy={-1} />
        <feGaussianBlur stdDeviation={1.5} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.188235 0 0 0 0 0.470588 0 0 0 0 0.843137 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_18590_1391"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy={-1} />
        <feGaussianBlur stdDeviation={1.5} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.27451 0 0 0 0 0.34902 0 0 0 0 0.8 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="effect1_innerShadow_18590_1391"
          result="effect2_innerShadow_18590_1391"
        />
      </filter>
      <filter
        id="filter1_f_18590_1391"
        x={25.2928}
        y={1.6875}
        width={5.5}
        height={28.375}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={1}
          result="effect1_foregroundBlur_18590_1391"
        />
      </filter>
      <filter
        id="filter2_f_18590_1391"
        x={2.56915}
        y={1}
        width={27.2812}
        height={5.5}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={1}
          result="effect1_foregroundBlur_18590_1391"
        />
      </filter>
      <filter
        id="filter3_f_18590_1391"
        x={5.79279}
        y={7.56274}
        width={20}
        height={16.6244}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={0.5}
          result="effect1_foregroundBlur_18590_1391"
        />
      </filter>
      <filter
        id="filter4_ii_18590_1391"
        x={5.79279}
        y={8.16274}
        width={19.4}
        height={16.0244}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={-1} dy={1} />
        <feGaussianBlur stdDeviation={1} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.866667 0 0 0 0 0.819608 0 0 0 0 0.941176 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_18590_1391"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={0.4} dy={-0.4} />
        <feGaussianBlur stdDeviation={0.5} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="effect1_innerShadow_18590_1391"
          result="effect2_innerShadow_18590_1391"
        />
      </filter>
      <linearGradient
        id="paint0_linear_18590_1391"
        x1={15.7928}
        y1={5.51201}
        x2={15.7928}
        y2={38.7647}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#5CB7FF" />
        <stop offset={1} stopColor="#4878DD" />
      </linearGradient>
      <radialGradient
        id="paint1_radial_18590_1391"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(27.5115 4.03125) rotate(136.771) scale(2.14444 2.50466)"
      >
        <stop stopColor="#7BD7FF" />
        <stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
      </radialGradient>
      <linearGradient
        id="paint2_linear_18590_1391"
        x1={28.5428}
        y1={4.4375}
        x2={28.5428}
        y2={27.3125}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#7FD9FF" />
        <stop offset={1} stopColor="#639DF4" />
      </linearGradient>
      <linearGradient
        id="paint3_linear_18590_1391"
        x1={28.2567}
        y1={4.00002}
        x2={2.7254}
        y2={4.00002}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#7DD8FF" />
        <stop offset={1} stopColor="#5DB6FF" />
      </linearGradient>
    </defs>
  </svg>
);
module.exports = NextTrackButtonIcon;