Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

VS Code Icons · VscNewCollection

New Collection icon

A free new collection 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.

Also known asplus icon add icon create icon insert icon folder icon directory icon files icon archive icon

License: CC BY 4.0 license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/new-collection.json

components/icons/vscode-codicons-new-collection.tsx

import * as React from "react";

/**
 * New Collection from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/new-collection. Sized in em, colored by currentColor.
 */
export function VscNewCollectionIcon(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
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.5 7C13.9853 7 16 9.01472 16 11.5C16 13.9853 13.9853 16 11.5 16C9.01472 16 7 13.9853 7 11.5C7 9.01472 9.01472 7 11.5 7ZM11.5 8.5C11.2239 8.5 11 8.72386 11 9V11H9C8.72386 11 8.5 11.2239 8.5 11.5C8.5 11.7761 8.72386 12 9 12H11V14C11 14.2761 11.2239 14.5 11.5 14.5C11.7761 14.5 12 14.2761 12 14V12H14C14.2761 12 14.5 11.7761 14.5 11.5C14.5 11.2239 14.2761 11 14 11H12V9C12 8.72386 11.7761 8.5 11.5 8.5Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M13.5 1C13.8978 1 14.2792 1.15815 14.5605 1.43945C14.8419 1.72076 15 2.10218 15 2.5V7.25684C14.693 7.00335 14.3576 6.78341 14 6.60059V2.5C14 2.36739 13.9473 2.24025 13.8535 2.14648C13.7597 2.05272 13.6326 2 13.5 2H8.5C8.36739 2 8.24025 2.05272 8.14648 2.14648C8.05272 2.24025 8 2.36739 8 2.5V5H10.5C10.8978 5 11.2792 5.15815 11.5605 5.43945C11.7243 5.60322 11.8446 5.80146 11.918 6.0166C11.78 6.00623 11.6406 6 11.5 6C11.2365 6 10.9773 6.01885 10.7236 6.05469C10.6546 6.02004 10.5787 6 10.5 6H5.5C5.36739 6 5.24025 6.05272 5.14648 6.14648C5.05272 6.24025 5 6.36739 5 6.5V13.5C5 13.6326 5.05272 13.7597 5.14648 13.8535C5.24025 13.9473 5.36739 14 5.5 14H6.60156C6.78445 14.3576 7.00425 14.693 7.25781 15H5.5C5.10218 15 4.72076 14.8419 4.43945 14.5605C4.15815 14.2792 4 13.8978 4 13.5V13H2.5C2.10218 13 1.72076 12.8419 1.43945 12.5605C1.15815 12.2792 1 11.8978 1 11.5V4.5C1 4.10218 1.15815 3.72076 1.43945 3.43945C1.72076 3.15815 2.10218 3 2.5 3H7V2.5C7 2.10218 7.15815 1.72076 7.43945 1.43945C7.72076 1.15815 8.10218 1 8.5 1H13.5ZM2.5 4C2.36739 4 2.24025 4.05272 2.14648 4.14648C2.05272 4.24025 2 4.36739 2 4.5V11.5C2 11.6326 2.05272 11.7597 2.14648 11.8535C2.24025 11.9473 2.36739 12 2.5 12H4V6.5C4 6.10218 4.15815 5.72076 4.43945 5.43945C4.72076 5.15815 5.10218 5 5.5 5H7V4H2.5Z"
      />
    </svg>
  );
}

With react-icons

import { VscNewCollection } from "react-icons/vsc";

export function Example() {
  return <VscNewCollection className="size-5" />;
}

new-collection.svg

<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
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M11.5 7C13.9853 7 16 9.01472 16 11.5C16 13.9853 13.9853 16 11.5 16C9.01472 16 7 13.9853 7 11.5C7 9.01472 9.01472 7 11.5 7ZM11.5 8.5C11.2239 8.5 11 8.72386 11 9V11H9C8.72386 11 8.5 11.2239 8.5 11.5C8.5 11.7761 8.72386 12 9 12H11V14C11 14.2761 11.2239 14.5 11.5 14.5C11.7761 14.5 12 14.2761 12 14V12H14C14.2761 12 14.5 11.7761 14.5 11.5C14.5 11.2239 14.2761 11 14 11H12V9C12 8.72386 11.7761 8.5 11.5 8.5Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M13.5 1C13.8978 1 14.2792 1.15815 14.5605 1.43945C14.8419 1.72076 15 2.10218 15 2.5V7.25684C14.693 7.00335 14.3576 6.78341 14 6.60059V2.5C14 2.36739 13.9473 2.24025 13.8535 2.14648C13.7597 2.05272 13.6326 2 13.5 2H8.5C8.36739 2 8.24025 2.05272 8.14648 2.14648C8.05272 2.24025 8 2.36739 8 2.5V5H10.5C10.8978 5 11.2792 5.15815 11.5605 5.43945C11.7243 5.60322 11.8446 5.80146 11.918 6.0166C11.78 6.00623 11.6406 6 11.5 6C11.2365 6 10.9773 6.01885 10.7236 6.05469C10.6546 6.02004 10.5787 6 10.5 6H5.5C5.36739 6 5.24025 6.05272 5.14648 6.14648C5.05272 6.24025 5 6.36739 5 6.5V13.5C5 13.6326 5.05272 13.7597 5.14648 13.8535C5.24025 13.9473 5.36739 14 5.5 14H6.60156C6.78445 14.3576 7.00425 14.693 7.25781 15H5.5C5.10218 15 4.72076 14.8419 4.43945 14.5605C4.15815 14.2792 4 13.8978 4 13.5V13H2.5C2.10218 13 1.72076 12.8419 1.43945 12.5605C1.15815 12.2792 1 11.8978 1 11.5V4.5C1 4.10218 1.15815 3.72076 1.43945 3.43945C1.72076 3.15815 2.10218 3 2.5 3H7V2.5C7 2.10218 7.15815 1.72076 7.43945 1.43945C7.72076 1.15815 8.10218 1 8.5 1H13.5ZM2.5 4C2.36739 4 2.24025 4.05272 2.14648 4.14648C2.05272 4.24025 2 4.36739 2 4.5V11.5C2 11.6326 2.05272 11.7597 2.14648 11.8535C2.24025 11.9473 2.36739 12 2.5 12H4V6.5C4 6.10218 4.15815 5.72076 4.43945 5.43945C4.72076 5.15815 5.10218 5 5.5 5H7V4H2.5Z"
  />
</svg>

Attribution

"New Collection" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: plus, add, create, insert

Similar VS Code Icons icons