Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Dribbble icon
A free dribbble 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/dribbble.jsonimport * as React from "react";
/**
* Dribbble from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/flat-color/dribbble. Sized in em, colored by currentColor.
*/
export function FcDribbbleIcon(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}
>
<path
fill="#FF4081"
d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"
/>
<path
fill="#FFFFFF"
d="M33.061,26.273c-0.703-0.221-1.464,0.175-1.686,0.895c-0.824,2.658-2.316,5.419-2.993,5.57
c-0.507,0-1.236-0.43-1.958-1.44c1.674-3.594,2.551-8.106,2.551-11.118c0-8.413-2.124-10.18-3.908-10.18
c-3.757,0-3.8,9.912-3.8,10.012c0,1.166,0.042,2.248,0.121,3.256c-0.518-0.189-1.113-0.319-1.77-0.319
c-3.86,0-5.618,3.809-5.618,7.347C14,33.63,15.871,37,20.046,37c1.972,0,3.634-1.291,4.975-3.221
c1.188,1.235,2.432,1.696,3.36,1.696c2.923,0,4.858-5.233,5.556-7.486C34.16,27.27,33.767,26.502,33.061,26.273z M20.048,34.264
c-3.031,0-3.36-2.775-3.36-3.969c0-0.188,0.034-4.611,2.932-4.611c1.144,0,2.022,0.885,2.022,0.885
c0.065,0.07,0.137,0.131,0.212,0.184c0.375,1.904,0.904,3.426,1.516,4.632C22.366,33.123,21.203,34.264,20.048,34.264z
M24.901,27.926c-0.559-1.93-0.946-4.521-0.946-7.914c0-3.126,0.666-6.068,1.219-7.073c0.424,0.644,1.115,2.65,1.115,7.241
C26.289,22.616,25.75,25.446,24.901,27.926z"
/>
</svg>
);
}import { FcDribbble } from "react-icons/fc";
export function Example() {
return <FcDribbble 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"
>
<path
fill="#FF4081"
d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"
/>
<path
fill="#FFFFFF"
d="M33.061,26.273c-0.703-0.221-1.464,0.175-1.686,0.895c-0.824,2.658-2.316,5.419-2.993,5.57
c-0.507,0-1.236-0.43-1.958-1.44c1.674-3.594,2.551-8.106,2.551-11.118c0-8.413-2.124-10.18-3.908-10.18
c-3.757,0-3.8,9.912-3.8,10.012c0,1.166,0.042,2.248,0.121,3.256c-0.518-0.189-1.113-0.319-1.77-0.319
c-3.86,0-5.618,3.809-5.618,7.347C14,33.63,15.871,37,20.046,37c1.972,0,3.634-1.291,4.975-3.221
c1.188,1.235,2.432,1.696,3.36,1.696c2.923,0,4.858-5.233,5.556-7.486C34.16,27.27,33.767,26.502,33.061,26.273z M20.048,34.264
c-3.031,0-3.36-2.775-3.36-3.969c0-0.188,0.034-4.611,2.932-4.611c1.144,0,2.022,0.885,2.022,0.885
c0.065,0.07,0.137,0.131,0.212,0.184c0.375,1.904,0.904,3.426,1.516,4.632C22.366,33.123,21.203,34.264,20.048,34.264z
M24.901,27.926c-0.559-1.93-0.946-4.521-0.946-7.914c0-3.126,0.666-6.068,1.219-7.073c0.424,0.644,1.115,2.65,1.115,7.241
C26.289,22.616,25.75,25.446,24.901,27.926z"
/>
</svg>"Dribbble" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.