Hover the icon or press Play. Suggested motion: nudge-down. Pick another to preview it and update the animated code:
Inbox icon
A free inbox 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/inbox.jsonimport * as React from "react";
/**
* Inbox from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/inbox. Sized in em, colored by currentColor.
*/
export function VscInboxIcon(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="M3.5 1C2.11929 1 1 2.11929 1 3.5V12.5C1 13.8807 2.11929 15 3.5 15H12.5C13.8807 15 15 13.8807 15 12.5V3.5C15 2.11929 13.8807 1 12.5 1H3.5ZM14 8H10.5L10.4101 8.00806C10.1769 8.05039 10 8.25454 10 8.5C10 8.55217 9.99216 8.66189 9.96774 8.80843C9.92659 9.05536 9.85276 9.30145 9.74029 9.52639C9.43156 10.1439 8.89734 10.5 8 10.5C7.10266 10.5 6.56844 10.1439 6.25971 9.52639C6.14724 9.30145 6.07341 9.05536 6.03226 8.80843C6.00784 8.66189 6 8.55217 6 8.5C6 8.22386 5.77614 8 5.5 8H2V3.5C2 2.67157 2.67157 2 3.5 2H12.5C13.3284 2 14 2.67157 14 3.5V8ZM2 9H5.044L5.0794 9.17401C5.1363 9.42568 5.22762 9.69828 5.36529 9.97361C5.83781 10.9186 6.70984 11.5 8 11.5C9.29016 11.5 10.1622 10.9186 10.6347 9.97361L10.7295 9.76791C10.8159 9.56329 10.8779 9.36276 10.9206 9.17401L10.955 9H14V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V9Z"
/>
</svg>
);
}import { VscInbox } from "react-icons/vsc";
export function Example() {
return <VscInbox 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="M3.5 1C2.11929 1 1 2.11929 1 3.5V12.5C1 13.8807 2.11929 15 3.5 15H12.5C13.8807 15 15 13.8807 15 12.5V3.5C15 2.11929 13.8807 1 12.5 1H3.5ZM14 8H10.5L10.4101 8.00806C10.1769 8.05039 10 8.25454 10 8.5C10 8.55217 9.99216 8.66189 9.96774 8.80843C9.92659 9.05536 9.85276 9.30145 9.74029 9.52639C9.43156 10.1439 8.89734 10.5 8 10.5C7.10266 10.5 6.56844 10.1439 6.25971 9.52639C6.14724 9.30145 6.07341 9.05536 6.03226 8.80843C6.00784 8.66189 6 8.55217 6 8.5C6 8.22386 5.77614 8 5.5 8H2V3.5C2 2.67157 2.67157 2 3.5 2H12.5C13.3284 2 14 2.67157 14 3.5V8ZM2 9H5.044L5.0794 9.17401C5.1363 9.42568 5.22762 9.69828 5.36529 9.97361C5.83781 10.9186 6.70984 11.5 8 11.5C9.29016 11.5 10.1622 10.9186 10.6347 9.97361L10.7295 9.76791C10.8159 9.56329 10.8779 9.36276 10.9206 9.17401L10.955 9H14V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V9Z"
/>
</svg>"Inbox" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.