@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
653 lines (652 loc) • 21.2 kB
JSX
const React = require("react");
const MusicalNotesIcon = ({ 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_iii_18_18069)">
<path
d="M19.1726 14.2574C19.4274 14.231 19.6211 14.0163 19.6211 13.7601L19.6211 10.7732C19.6211 10.4767 19.3645 10.2454 19.0696 10.2759L13.2759 10.8759C12.7662 10.9287 12.3789 11.3582 12.3789 11.8706V25.375H15.2148V15.3436C15.2148 14.9593 15.5053 14.6372 15.8876 14.5976L19.1726 14.2574Z"
fill="url(#paint0_linear_18_18069)"
/>
</g>
<path
d="M19.1726 14.2574C19.4274 14.231 19.6211 14.0163 19.6211 13.7601L19.6211 10.7732C19.6211 10.4767 19.3645 10.2454 19.0696 10.2759L13.2759 10.8759C12.7662 10.9287 12.3789 11.3582 12.3789 11.8706V25.375H15.2148V15.3436C15.2148 14.9593 15.5053 14.6372 15.8876 14.5976L19.1726 14.2574Z"
fill="url(#paint1_radial_18_18069)"
/>
<g filter="url(#filter1_iii_18_18069)">
<path
d="M29.2351 9.98399C29.4899 9.9576 29.6836 9.74285 29.6836 9.48665L29.6836 6.49981C29.6836 6.20329 29.427 5.97192 29.1321 6.00247L23.3384 6.60246C22.8287 6.65524 22.4414 7.08474 22.4414 7.59714V21.1016H25.2773V11.0702C25.2773 10.6859 25.5678 10.3638 25.9501 10.3242L29.2351 9.98399Z"
fill="url(#paint2_linear_18_18069)"
/>
</g>
<g filter="url(#filter2_iii_18_18069)">
<path
d="M29.2351 9.98399C29.4899 9.9576 29.6836 9.74285 29.6836 9.48665L29.6836 6.49981C29.6836 6.20329 29.427 5.97192 29.1321 6.00247L23.3384 6.60246C22.8287 6.65524 22.4414 7.08474 22.4414 7.59714V21.1016H25.2773V11.0702C25.2773 10.6859 25.5678 10.3638 25.9501 10.3242L29.2351 9.98399Z"
fill="url(#paint3_linear_18_18069)"
/>
</g>
<g filter="url(#filter3_iii_18_18069)">
<path
d="M14.2351 7.47618C14.4899 7.44978 14.6836 7.23504 14.6836 6.97883L14.6836 3.99199C14.6836 3.69548 14.427 3.46411 14.1321 3.49466L8.3384 4.09465C7.82872 4.14743 7.44141 4.57693 7.44141 5.08933V16.625H10.2773V8.56238C10.2773 8.17808 10.5678 7.85596 10.9501 7.81637L14.2351 7.47618Z"
fill="url(#paint4_linear_18_18069)"
/>
</g>
<path
d="M14.2351 7.47618C14.4899 7.44978 14.6836 7.23504 14.6836 6.97883L14.6836 3.99199C14.6836 3.69548 14.427 3.46411 14.1321 3.49466L8.3384 4.09465C7.82872 4.14743 7.44141 4.57693 7.44141 5.08933V16.625H10.2773V8.56238C10.2773 8.17808 10.5678 7.85596 10.9501 7.81637L14.2351 7.47618Z"
fill="url(#paint5_linear_18_18069)"
/>
<path
d="M14.2351 7.47618C14.4899 7.44978 14.6836 7.23504 14.6836 6.97883L14.6836 3.99199C14.6836 3.69548 14.427 3.46411 14.1321 3.49466L8.3384 4.09465C7.82872 4.14743 7.44141 4.57693 7.44141 5.08933V16.625H10.2773V8.56238C10.2773 8.17808 10.5678 7.85596 10.9501 7.81637L14.2351 7.47618Z"
fill="url(#paint6_radial_18_18069)"
/>
<circle
cx={10.9414}
cy={25.6262}
r={4.27344}
fill="url(#paint7_radial_18_18069)"
/>
<circle
cx={10.9414}
cy={25.6262}
r={4.27344}
fill="url(#paint8_radial_18_18069)"
/>
<circle
cx={10.9414}
cy={25.6262}
r={4.27344}
fill="url(#paint9_radial_18_18069)"
/>
<circle
cx={10.9414}
cy={25.6262}
r={4.27344}
fill="url(#paint10_radial_18_18069)"
/>
<circle
cx={10.9414}
cy={25.6262}
r={4.27344}
fill="url(#paint11_radial_18_18069)"
/>
<circle
cx={6.06201}
cy={16.5254}
r={4.20898}
fill="url(#paint12_radial_18_18069)"
/>
<circle
cx={6.06201}
cy={16.5254}
r={4.20898}
fill="url(#paint13_radial_18_18069)"
/>
<circle
cx={6.06201}
cy={16.5254}
r={4.20898}
fill="url(#paint14_radial_18_18069)"
/>
<circle
cx={6.06201}
cy={16.5254}
r={4.20898}
fill="url(#paint15_radial_18_18069)"
/>
<circle
cx={6.06201}
cy={16.5254}
r={4.20898}
fill="url(#paint16_radial_18_18069)"
/>
<circle
cx={21.0039}
cy={21.4219}
r={4.27344}
fill="url(#paint17_radial_18_18069)"
/>
<circle
cx={21.0039}
cy={21.4219}
r={4.27344}
fill="url(#paint18_radial_18_18069)"
/>
<circle
cx={21.0039}
cy={21.4219}
r={4.27344}
fill="url(#paint19_radial_18_18069)"
/>
<circle
cx={21.0039}
cy={21.4219}
r={4.27344}
fill="url(#paint20_radial_18_18069)"
/>
<defs>
<filter
id="filter0_iii_18_18069"
x={11.9789}
y={9.67319}
width={8.24219}
height={16.3018}
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={0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.239216 0 0 0 0 0.211765 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_18069"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.317647 0 0 0 0 0.298039 0 0 0 0 0.341176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_18069"
result="effect2_innerShadow_18_18069"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_18069"
result="effect3_innerShadow_18_18069"
/>
</filter>
<filter
id="filter1_iii_18_18069"
x={22.0414}
y={5.39976}
width={8.24219}
height={16.3018}
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={0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.239216 0 0 0 0 0.211765 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_18069"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.317647 0 0 0 0 0.298039 0 0 0 0 0.341176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_18069"
result="effect2_innerShadow_18_18069"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_18069"
result="effect3_innerShadow_18_18069"
/>
</filter>
<filter
id="filter2_iii_18_18069"
x={22.0414}
y={5.39976}
width={8.24219}
height={16.3018}
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={0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.239216 0 0 0 0 0.211765 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_18069"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.317647 0 0 0 0 0.298039 0 0 0 0 0.341176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_18069"
result="effect2_innerShadow_18_18069"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_18069"
result="effect3_innerShadow_18_18069"
/>
</filter>
<filter
id="filter3_iii_18_18069"
x={7.04141}
y={2.89194}
width={8.24219}
height={14.3331}
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={0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.239216 0 0 0 0 0.211765 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_18069"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.317647 0 0 0 0 0.298039 0 0 0 0 0.341176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_18069"
result="effect2_innerShadow_18_18069"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_18069"
result="effect3_innerShadow_18_18069"
/>
</filter>
<linearGradient
id="paint0_linear_18_18069"
x1={16}
y1={14.4748}
x2={16}
y2={25.375}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#473B53" />
<stop offset={1} stopColor="#433D4A" />
</linearGradient>
<radialGradient
id="paint1_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.6151 22.9652) rotate(-47.8155) scale(0.851877 2.37658)"
>
<stop offset={0.428073} stopColor="#545058" />
<stop offset={1} stopColor="#545058" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18_18069"
x1={26.0625}
y1={10.2014}
x2={26.0625}
y2={21.1016}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#473B53" />
<stop offset={1} stopColor="#433D4A" />
</linearGradient>
<linearGradient
id="paint3_linear_18_18069"
x1={26.0625}
y1={10.2014}
x2={26.0625}
y2={21.1016}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#473B53" />
<stop offset={1} stopColor="#433D4A" />
</linearGradient>
<linearGradient
id="paint4_linear_18_18069"
x1={11.0625}
y1={7.14581}
x2={11.0625}
y2={16.625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#473B53" />
<stop offset={1} stopColor="#433D4A" />
</linearGradient>
<linearGradient
id="paint5_linear_18_18069"
x1={7.33239}
y1={10.8929}
x2={7.83541}
y2={10.8929}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5C5A5F" />
<stop offset={1} stopColor="#5C5A5F" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint6_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.58499 13.7926) rotate(-47.883) scale(0.970637 2.32919)"
>
<stop offset={0.428073} stopColor="#545058" />
<stop offset={1} stopColor="#545058" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.9414 29.4677) rotate(-90) scale(4.85503 6.67567)"
>
<stop stopColor="#442B58" />
<stop offset={1} stopColor="#302C33" />
</radialGradient>
<radialGradient
id="paint8_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.1666 24.4329) rotate(130.389) scale(3.95442)"
>
<stop stopColor="#5A585C" />
<stop offset={1} stopColor="#5A585C" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.5373 25.9613) rotate(-169.765) scale(6.57804 6.76299)"
>
<stop offset={0.619372} stopColor="#5C5C5C" stopOpacity={0} />
<stop offset={1} stopColor="#828282" />
</radialGradient>
<radialGradient
id="paint10_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.97146 25.6262) scale(5.89121 7.83031)"
>
<stop offset={0.796178} stopColor="#575658" stopOpacity={0} />
<stop offset={0.955414} stopColor="#575658" />
</radialGradient>
<radialGradient
id="paint11_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.9414 25.2156) rotate(90) scale(4.85749 4.92437)"
>
<stop offset={0.880531} stopColor="#64487C" stopOpacity={0} />
<stop offset={1} stopColor="#64487C" />
</radialGradient>
<radialGradient
id="paint12_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(6.06201 20.309) rotate(-90) scale(4.78181 6.57498)"
>
<stop stopColor="#442B58" />
<stop offset={1} stopColor="#302C33" />
</radialGradient>
<radialGradient
id="paint13_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.25367 15.35) rotate(130.389) scale(3.89478)"
>
<stop stopColor="#5A585C" />
<stop offset={1} stopColor="#5A585C" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint14_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.63381 16.8554) rotate(-169.765) scale(6.47883 6.66098)"
>
<stop offset={0.619372} stopColor="#5C5C5C" stopOpacity={0} />
<stop offset={1} stopColor="#828282" />
</radialGradient>
<radialGradient
id="paint15_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.10669 16.5254) scale(5.80236 7.71222)"
>
<stop offset={0.796178} stopColor="#575658" stopOpacity={0} />
<stop offset={0.955414} stopColor="#575658" />
</radialGradient>
<radialGradient
id="paint16_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(6.06201 16.121) rotate(90) scale(4.78423 4.8501)"
>
<stop offset={0.880531} stopColor="#64487C" stopOpacity={0} />
<stop offset={1} stopColor="#64487C" />
</radialGradient>
<radialGradient
id="paint17_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.0039 25.2634) rotate(-90) scale(4.85503 6.67567)"
>
<stop stopColor="#442B58" />
<stop offset={1} stopColor="#2D2931" />
</radialGradient>
<radialGradient
id="paint18_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.2291 20.2285) rotate(130.389) scale(3.95442)"
>
<stop stopColor="#5A585C" />
<stop offset={1} stopColor="#5A585C" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint19_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.034 21.4219) scale(5.89121 7.83031)"
>
<stop offset={0.796178} stopColor="#575658" stopOpacity={0} />
<stop offset={0.955414} stopColor="#575658" />
</radialGradient>
<radialGradient
id="paint20_radial_18_18069"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.0039 21.0113) rotate(90) scale(4.85749 4.92437)"
>
<stop offset={0.880531} stopColor="#64487C" stopOpacity={0} />
<stop offset={1} stopColor="#64487C" />
</radialGradient>
</defs>
</svg>
);
module.exports = MusicalNotesIcon;