Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Cd Logo icon
A free cd logo icon from Flat Color Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- MIT license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/cd-logo.jsonimport * as React from "react";
/**
* Cd Logo from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/flat-color/cd-logo. Sized in em, colored by currentColor.
*/
export function FcCdLogoIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 48 48"
enableBackground="new 0 0 48 48"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g>
<path
fill="#2196F3"
d="M17.814,18H20.2c0.5,0,0.8,0.4,0.8,0.8v16.4c0,0.399-0.4,0.8-0.8,0.8h-2.384c-0.4,0-0.8-0.4-0.8-0.8V18.8
C16.916,18.3,17.314,18,17.814,18z"
/>
<path
fill="#2196F3"
d="M14.2,11h-3.3c-0.5,0-0.9,0.403-0.9,0.807V17H2.2C1.6,17,1,17.605,1,18.21v16.58C1,35.396,1.6,36,2.2,36h12
c0.4,0,0.8-0.305,0.8-0.809V11.807C15,11.403,14.7,11,14.2,11z M10,31.283c0,0.398-0.4,0.8-0.8,0.8H6.8c-0.4,0-0.8-0.399-0.8-0.8
V21.8C6,21.4,6.3,21,6.8,21h2.4c0.5,0,0.8,0.4,0.8,0.8V31.283z"
/>
<path
fill="#2196F3"
d="M33.2,25c0.5,0,0.8,0.6,0.8,0.8v9.4c0,0.399-0.422,0.8-0.8,0.8h-9.4c-0.425,0-0.8-0.4-0.8-0.8v-2.386
c0-0.5,0.4-0.799,0.8-0.799L30,32v-3h-6.2c-0.331,0-0.8-0.4-0.8-0.801V18.8c0-0.5,0.4-0.8,0.8-0.8h9.4c0.399,0,0.8,0.4,0.8,0.8v2.4
c0,0.3-0.266,0.8-0.8,0.8H27v3H33.2z"
/>
<path
fill="#2196F3"
d="M48,28v7.2c0,0.399-0.4,0.8-0.801,0.8H36.8c-0.2,0-0.8-0.4-0.8-0.8V18.8c0-0.5,0.432-0.8,0.831-0.8H47.2
c0,0,0.8,0,0.8,0.8V25h-4v-2.2c0,0,0.1-0.8-0.8-0.8h-2.4c-0.5,0-0.8,0.4-0.8,0.8v8.4c0,0.399,0.5,0.8,0.8,0.8h2.4
c0.399,0,0.8-0.4,0.8-0.8V28H48z"
/>
</g>
<g>
<polygon
fill="#0D47A1"
points="45.799,15.98 46.9,15.98 46.9,12.881 48,12.881 48,11.98 44.799,11.98 44.799,12.881
45.799,12.881 "
/>
<path
fill="#0D47A1"
d="M44.014,14.476h-1.143v0.095c0,0.382-0.096,0.573-0.572,0.573c-0.475,0-0.57-0.191-0.57-0.762v-0.668
c0-0.572,0-0.762,0.57-0.762c0.381,0,0.572,0.095,0.572,0.477v0.095h1.047v-0.095c0-1.047-0.381-1.429-1.523-1.429h-0.287
c-1.141,0-1.523,0.382-1.523,1.618v0.764c0,1.142,0.381,1.618,1.523,1.618h0.383c1.047,0,1.428-0.477,1.428-1.43v-0.095H44.014z"
/>
<polygon
fill="#0D47A1"
points="29.516,12 28.717,14.9 27.816,12 26.217,12 26.217,16 27.316,16 27.316,13 28.115,16 29.217,16
30.115,13.1 30.115,16 31.115,16 31.115,12 "
/>
<path
fill="#0D47A1"
d="M38.713,12h-0.9h-0.898l-1.199,4h1.199l0.199-0.7h0.602h0.799l0.199,0.7h1.199L38.713,12z M37.914,14.5
h-0.4l0.4-1.7l0,0l0,0l0.398,1.7H37.914z"
/>
<path
fill="#0D47A1"
d="M33.92,12h-0.199H32.02v4h1.102v-1.1h0.6h0.199c1.102,0,1.5-0.4,1.5-1.4v-0.3C35.42,12.3,35.02,12,33.92,12
z M34.32,13.6c0,0.4-0.1,0.5-0.4,0.5h-0.199h-0.6v-1.2h0.6h0.1c0.4,0,0.5,0.1,0.5,0.4V13.6z"
/>
<path
fill="#0D47A1"
d="M23.594,12h-0.286h-0.286c-1.143,0-1.523,0.382-1.523,1.618v0.762c0,1.144,0.381,1.62,1.523,1.62h0.286
h0.286c1.143,0,1.523-0.477,1.523-1.62v-0.762C25.117,12.382,24.737,12,23.594,12z M23.975,14.19c0,0.571,0,0.763-0.571,0.763
h-0.095h-0.095c-0.571,0-0.571-0.191-0.571-0.763v-0.572c0-0.57,0-0.762,0.571-0.762h0.095h0.095c0.571,0,0.571,0.191,0.571,0.762
V14.19z"
/>
<path
fill="#0D47A1"
d="M20.422,14.477h-1.144v0.095c0,0.382-0.095,0.571-0.571,0.571c-0.476,0-0.571-0.189-0.571-0.762v-0.666
c0-0.573,0-0.762,0.571-0.762c0.381,0,0.571,0.095,0.571,0.475v0.096h1.048v-0.096c0-1.047-0.381-1.428-1.523-1.428h-0.286
c-1.143,0-1.524,0.381-1.524,1.618v0.763c0,1.143,0.381,1.619,1.524,1.619h0.381c1.048,0,1.429-0.477,1.429-1.429v-0.095H20.422z"
/>
</g>
</svg>
);
}import { FcCdLogo } from "react-icons/fc";
export function Example() {
return <FcCdLogo className="size-5" />;
}<svg
version="1.1"
x="0px"
y="0px"
viewBox="0 0 48 48"
enable-background="new 0 0 48 48"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
fill="#2196F3"
d="M17.814,18H20.2c0.5,0,0.8,0.4,0.8,0.8v16.4c0,0.399-0.4,0.8-0.8,0.8h-2.384c-0.4,0-0.8-0.4-0.8-0.8V18.8
C16.916,18.3,17.314,18,17.814,18z"
/>
<path
fill="#2196F3"
d="M14.2,11h-3.3c-0.5,0-0.9,0.403-0.9,0.807V17H2.2C1.6,17,1,17.605,1,18.21v16.58C1,35.396,1.6,36,2.2,36h12
c0.4,0,0.8-0.305,0.8-0.809V11.807C15,11.403,14.7,11,14.2,11z M10,31.283c0,0.398-0.4,0.8-0.8,0.8H6.8c-0.4,0-0.8-0.399-0.8-0.8
V21.8C6,21.4,6.3,21,6.8,21h2.4c0.5,0,0.8,0.4,0.8,0.8V31.283z"
/>
<path
fill="#2196F3"
d="M33.2,25c0.5,0,0.8,0.6,0.8,0.8v9.4c0,0.399-0.422,0.8-0.8,0.8h-9.4c-0.425,0-0.8-0.4-0.8-0.8v-2.386
c0-0.5,0.4-0.799,0.8-0.799L30,32v-3h-6.2c-0.331,0-0.8-0.4-0.8-0.801V18.8c0-0.5,0.4-0.8,0.8-0.8h9.4c0.399,0,0.8,0.4,0.8,0.8v2.4
c0,0.3-0.266,0.8-0.8,0.8H27v3H33.2z"
/>
<path
fill="#2196F3"
d="M48,28v7.2c0,0.399-0.4,0.8-0.801,0.8H36.8c-0.2,0-0.8-0.4-0.8-0.8V18.8c0-0.5,0.432-0.8,0.831-0.8H47.2
c0,0,0.8,0,0.8,0.8V25h-4v-2.2c0,0,0.1-0.8-0.8-0.8h-2.4c-0.5,0-0.8,0.4-0.8,0.8v8.4c0,0.399,0.5,0.8,0.8,0.8h2.4
c0.399,0,0.8-0.4,0.8-0.8V28H48z"
/>
</g>
<g>
<polygon
fill="#0D47A1"
points="45.799,15.98 46.9,15.98 46.9,12.881 48,12.881 48,11.98 44.799,11.98 44.799,12.881
45.799,12.881 "
/>
<path
fill="#0D47A1"
d="M44.014,14.476h-1.143v0.095c0,0.382-0.096,0.573-0.572,0.573c-0.475,0-0.57-0.191-0.57-0.762v-0.668
c0-0.572,0-0.762,0.57-0.762c0.381,0,0.572,0.095,0.572,0.477v0.095h1.047v-0.095c0-1.047-0.381-1.429-1.523-1.429h-0.287
c-1.141,0-1.523,0.382-1.523,1.618v0.764c0,1.142,0.381,1.618,1.523,1.618h0.383c1.047,0,1.428-0.477,1.428-1.43v-0.095H44.014z"
/>
<polygon
fill="#0D47A1"
points="29.516,12 28.717,14.9 27.816,12 26.217,12 26.217,16 27.316,16 27.316,13 28.115,16 29.217,16
30.115,13.1 30.115,16 31.115,16 31.115,12 "
/>
<path
fill="#0D47A1"
d="M38.713,12h-0.9h-0.898l-1.199,4h1.199l0.199-0.7h0.602h0.799l0.199,0.7h1.199L38.713,12z M37.914,14.5
h-0.4l0.4-1.7l0,0l0,0l0.398,1.7H37.914z"
/>
<path
fill="#0D47A1"
d="M33.92,12h-0.199H32.02v4h1.102v-1.1h0.6h0.199c1.102,0,1.5-0.4,1.5-1.4v-0.3C35.42,12.3,35.02,12,33.92,12
z M34.32,13.6c0,0.4-0.1,0.5-0.4,0.5h-0.199h-0.6v-1.2h0.6h0.1c0.4,0,0.5,0.1,0.5,0.4V13.6z"
/>
<path
fill="#0D47A1"
d="M23.594,12h-0.286h-0.286c-1.143,0-1.523,0.382-1.523,1.618v0.762c0,1.144,0.381,1.62,1.523,1.62h0.286
h0.286c1.143,0,1.523-0.477,1.523-1.62v-0.762C25.117,12.382,24.737,12,23.594,12z M23.975,14.19c0,0.571,0,0.763-0.571,0.763
h-0.095h-0.095c-0.571,0-0.571-0.191-0.571-0.763v-0.572c0-0.57,0-0.762,0.571-0.762h0.095h0.095c0.571,0,0.571,0.191,0.571,0.762
V14.19z"
/>
<path
fill="#0D47A1"
d="M20.422,14.477h-1.144v0.095c0,0.382-0.095,0.571-0.571,0.571c-0.476,0-0.571-0.189-0.571-0.762v-0.666
c0-0.573,0-0.762,0.571-0.762c0.381,0,0.571,0.095,0.571,0.475v0.096h1.048v-0.096c0-1.047-0.381-1.428-1.523-1.428h-0.286
c-1.143,0-1.524,0.381-1.524,1.618v0.763c0,1.143,0.381,1.619,1.524,1.619h0.381c1.048,0,1.429-0.477,1.429-1.429v-0.095H20.422z"
/>
</g>
</svg>"Cd Logo" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.