Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Reddit icon
A free reddit 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/reddit.jsonimport * as React from "react";
/**
* Reddit from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/flat-color/reddit. Sized in em, colored by currentColor.
*/
export function FcRedditIcon(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="#FFFFFF"
d="M12.193,19.555c-1.94-1.741-4.79-1.727-6.365,0.029c-1.576,1.756-1.301,5.023,0.926,6.632L12.193,19.555z"
/>
<path
fill="#FFFFFF"
d="M35.807,19.555c1.939-1.741,4.789-1.727,6.365,0.029c1.575,1.756,1.302,5.023-0.927,6.632L35.807,19.555z"
/>
<g>
<circle fill="#FFFFFF" cx="38.32" cy="10.475" r="3.5" />
</g>
<g>
<ellipse fill="#FFFFFF" cx="24.085" cy="28.611" rx="18.085" ry="12.946" />
</g>
</g>
<g>
<circle fill="#D84315" cx="30.365" cy="26.39" r="2.884" />
<circle fill="#D84315" cx="17.635" cy="26.39" r="2.884" />
</g>
<g>
<path
fill="#37474F"
d="M24.002,34.902c-3.252,0-6.14-0.745-8.002-1.902c1.024,2.044,4.196,4,8.002,4c3.802,0,6.976-1.956,7.998-4
C30.143,34.157,27.254,34.902,24.002,34.902z"
/>
<path
fill="#37474F"
d="M41.83,27.026l-1.17-1.621c0.831-0.6,1.373-1.556,1.488-2.623c0.105-0.98-0.157-1.903-0.721-2.531
c-0.571-0.637-1.391-0.99-2.307-0.994c-0.927,0.013-1.894,0.365-2.646,1.041l-1.336-1.488c1.123-1.008,2.545-1.523,3.991-1.553
c1.488,0.007,2.833,0.596,3.786,1.658c0.942,1.05,1.387,2.537,1.221,4.081C43.961,24.626,43.121,26.096,41.83,27.026z"
/>
<path
fill="#37474F"
d="M6.169,27.026c-1.29-0.932-2.131-2.401-2.306-4.031c-0.166-1.543,0.279-3.03,1.221-4.079
c0.953-1.062,2.297-1.651,3.785-1.658c0.009,0,0.018,0,0.027,0c1.441,0,2.849,0.551,3.965,1.553l-1.336,1.488
c-0.753-0.676-1.689-1.005-2.646-1.041c-0.916,0.004-1.735,0.357-2.306,0.994c-0.563,0.628-0.826,1.55-0.721,2.53
c0.115,1.067,0.657,2.023,1.488,2.624L6.169,27.026z"
/>
<path
fill="#37474F"
d="M25,16.84h-2c0-2.885,0-10.548,4.979-10.548c2.154,0,3.193,1.211,3.952,2.096
c0.629,0.734,0.961,1.086,1.616,1.086h1.37v2h-1.37c-1.604,0-2.453-0.99-3.135-1.785c-0.67-0.781-1.198-1.398-2.434-1.398
C25.975,8.292,25,11.088,25,16.84z"
/>
<path
fill="#37474F"
d="M24.085,16.95c9.421,0,17.085,5.231,17.085,11.661c0,6.431-7.664,11.662-17.085,11.662S7,35.042,7,28.611
C7,22.181,14.664,16.95,24.085,16.95 M24.085,14.95C13.544,14.95,5,21.066,5,28.611c0,7.546,8.545,13.662,19.085,13.662
c10.54,0,19.085-6.116,19.085-13.662C43.17,21.066,34.625,14.95,24.085,14.95L24.085,14.95z"
/>
<path
fill="#37474F"
d="M38.32,7.975c1.379,0,2.5,1.122,2.5,2.5s-1.121,2.5-2.5,2.5s-2.5-1.122-2.5-2.5S36.941,7.975,38.32,7.975
M38.32,5.975c-2.484,0-4.5,2.015-4.5,4.5s2.016,4.5,4.5,4.5c2.486,0,4.5-2.015,4.5-4.5S40.807,5.975,38.32,5.975L38.32,5.975z"
/>
</g>
</svg>
);
}import { FcReddit } from "react-icons/fc";
export function Example() {
return <FcReddit 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="#FFFFFF"
d="M12.193,19.555c-1.94-1.741-4.79-1.727-6.365,0.029c-1.576,1.756-1.301,5.023,0.926,6.632L12.193,19.555z"
/>
<path
fill="#FFFFFF"
d="M35.807,19.555c1.939-1.741,4.789-1.727,6.365,0.029c1.575,1.756,1.302,5.023-0.927,6.632L35.807,19.555z"
/>
<g>
<circle fill="#FFFFFF" cx="38.32" cy="10.475" r="3.5" />
</g>
<g>
<ellipse fill="#FFFFFF" cx="24.085" cy="28.611" rx="18.085" ry="12.946" />
</g>
</g>
<g>
<circle fill="#D84315" cx="30.365" cy="26.39" r="2.884" />
<circle fill="#D84315" cx="17.635" cy="26.39" r="2.884" />
</g>
<g>
<path
fill="#37474F"
d="M24.002,34.902c-3.252,0-6.14-0.745-8.002-1.902c1.024,2.044,4.196,4,8.002,4c3.802,0,6.976-1.956,7.998-4
C30.143,34.157,27.254,34.902,24.002,34.902z"
/>
<path
fill="#37474F"
d="M41.83,27.026l-1.17-1.621c0.831-0.6,1.373-1.556,1.488-2.623c0.105-0.98-0.157-1.903-0.721-2.531
c-0.571-0.637-1.391-0.99-2.307-0.994c-0.927,0.013-1.894,0.365-2.646,1.041l-1.336-1.488c1.123-1.008,2.545-1.523,3.991-1.553
c1.488,0.007,2.833,0.596,3.786,1.658c0.942,1.05,1.387,2.537,1.221,4.081C43.961,24.626,43.121,26.096,41.83,27.026z"
/>
<path
fill="#37474F"
d="M6.169,27.026c-1.29-0.932-2.131-2.401-2.306-4.031c-0.166-1.543,0.279-3.03,1.221-4.079
c0.953-1.062,2.297-1.651,3.785-1.658c0.009,0,0.018,0,0.027,0c1.441,0,2.849,0.551,3.965,1.553l-1.336,1.488
c-0.753-0.676-1.689-1.005-2.646-1.041c-0.916,0.004-1.735,0.357-2.306,0.994c-0.563,0.628-0.826,1.55-0.721,2.53
c0.115,1.067,0.657,2.023,1.488,2.624L6.169,27.026z"
/>
<path
fill="#37474F"
d="M25,16.84h-2c0-2.885,0-10.548,4.979-10.548c2.154,0,3.193,1.211,3.952,2.096
c0.629,0.734,0.961,1.086,1.616,1.086h1.37v2h-1.37c-1.604,0-2.453-0.99-3.135-1.785c-0.67-0.781-1.198-1.398-2.434-1.398
C25.975,8.292,25,11.088,25,16.84z"
/>
<path
fill="#37474F"
d="M24.085,16.95c9.421,0,17.085,5.231,17.085,11.661c0,6.431-7.664,11.662-17.085,11.662S7,35.042,7,28.611
C7,22.181,14.664,16.95,24.085,16.95 M24.085,14.95C13.544,14.95,5,21.066,5,28.611c0,7.546,8.545,13.662,19.085,13.662
c10.54,0,19.085-6.116,19.085-13.662C43.17,21.066,34.625,14.95,24.085,14.95L24.085,14.95z"
/>
<path
fill="#37474F"
d="M38.32,7.975c1.379,0,2.5,1.122,2.5,2.5s-1.121,2.5-2.5,2.5s-2.5-1.122-2.5-2.5S36.941,7.975,38.32,7.975
M38.32,5.975c-2.484,0-4.5,2.015-4.5,4.5s2.016,4.5,4.5,4.5c2.486,0,4.5-2.015,4.5-4.5S40.807,5.975,38.32,5.975L38.32,5.975z"
/>
</g>
</svg>"Reddit" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.