Hover the icon or press Play. Suggested motion: zoom. Pick another to preview it and update the animated code:
Search Fuzzy icon
A free search fuzzy icon from VS Code 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
- CC BY 4.0 license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/search-fuzzy.jsonimport * as React from "react";
/**
* Search Fuzzy from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/search-fuzzy. Sized in em, colored by currentColor.
*/
export function VscSearchFuzzyIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M13.8541 13.146L10.0161 9.30802C10.6321 8.53802 11.0001 7.56202 11.0001 6.49902C11.0001 4.01402 8.98505 1.99902 6.50005 1.99902C4.01505 1.99902 2.00005 4.01402 2.00005 6.49902C2.00005 8.98402 4.01505 10.999 6.50005 10.999C7.56205 10.999 8.53905 10.631 9.30905 10.015L13.1471 13.853C13.3421 14.048 13.6591 14.048 13.8541 13.853C14.0491 13.658 14.0491 13.341 13.8541 13.146ZM6.50005 10C4.56705 10 3.00005 8.43302 3.00005 6.50002C3.00005 4.56702 4.56705 3.00002 6.50005 3.00002C8.43305 3.00002 10.0001 4.56702 10.0001 6.50002C10.0001 8.43302 8.43305 10 6.50005 10ZM10.8531 15.147C11.0481 15.342 11.0481 15.659 10.8531 15.854C10.6581 16.049 10.3411 16.049 10.1461 15.854L8.50105 14.208L6.85505 15.854C6.66805 16.042 6.33605 16.042 6.14805 15.854L4.50205 14.208L2.85405 15.854C2.75605 15.951 2.62805 16 2.50005 16C2.37205 16 2.24405 15.952 2.14605 15.854L0.144053 13.854C-0.0509473 13.659 -0.0509473 13.342 0.144053 13.147C0.339053 12.952 0.656053 12.952 0.851053 13.147L2.49905 14.794L4.14705 13.147C4.34205 12.952 4.65905 12.952 4.85405 13.147L6.50005 14.793L8.14605 13.147C8.24005 13.054 8.36705 13.001 8.50005 13.001C8.63305 13.001 8.76005 13.053 8.85405 13.147L10.8531 15.147Z"
/>
</svg>
);
}import { VscSearchFuzzy } from "react-icons/vsc";
export function Example() {
return <VscSearchFuzzy className="size-5" />;
}<svg
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.8541 13.146L10.0161 9.30802C10.6321 8.53802 11.0001 7.56202 11.0001 6.49902C11.0001 4.01402 8.98505 1.99902 6.50005 1.99902C4.01505 1.99902 2.00005 4.01402 2.00005 6.49902C2.00005 8.98402 4.01505 10.999 6.50005 10.999C7.56205 10.999 8.53905 10.631 9.30905 10.015L13.1471 13.853C13.3421 14.048 13.6591 14.048 13.8541 13.853C14.0491 13.658 14.0491 13.341 13.8541 13.146ZM6.50005 10C4.56705 10 3.00005 8.43302 3.00005 6.50002C3.00005 4.56702 4.56705 3.00002 6.50005 3.00002C8.43305 3.00002 10.0001 4.56702 10.0001 6.50002C10.0001 8.43302 8.43305 10 6.50005 10ZM10.8531 15.147C11.0481 15.342 11.0481 15.659 10.8531 15.854C10.6581 16.049 10.3411 16.049 10.1461 15.854L8.50105 14.208L6.85505 15.854C6.66805 16.042 6.33605 16.042 6.14805 15.854L4.50205 14.208L2.85405 15.854C2.75605 15.951 2.62805 16 2.50005 16C2.37205 16 2.24405 15.952 2.14605 15.854L0.144053 13.854C-0.0509473 13.659 -0.0509473 13.342 0.144053 13.147C0.339053 12.952 0.656053 12.952 0.851053 13.147L2.49905 14.794L4.14705 13.147C4.34205 12.952 4.65905 12.952 4.85405 13.147L6.50005 14.793L8.14605 13.147C8.24005 13.054 8.36705 13.001 8.50005 13.001C8.63305 13.001 8.76005 13.053 8.85405 13.147L10.8531 15.147Z"
/>
</svg>"Search Fuzzy" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.