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

VS Code Icons · VscPackage

Package icon

A free package 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

Download SVG

Install with shadcn

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

components/icons/vscode-codicons-package.tsx

import * as React from "react";

/**
 * Package from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/package. Sized in em, colored by currentColor.
 */
export function VscPackageIcon(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="M6 8.63998C5.934 8.63998 5.867 8.62698 5.803 8.59898L3.303 7.52898C3.049 7.42098 2.931 7.12698 3.04 6.87298C3.149 6.61998 3.444 6.50098 3.696 6.60998L6.196 7.67998C6.45 7.78798 6.568 8.08198 6.459 8.33598C6.378 8.52498 6.193 8.63898 6 8.63898V8.63998Z"
      />
      <path
        d="M4.80397 10.17C4.86797 10.197 4.93397 10.21 4.99997 10.21C5.19397 10.21 5.37897 10.096 5.45997 9.90599C5.56797 9.65199 5.44997 9.35799 5.19597 9.24999L3.69597 8.60999C3.44397 8.50199 3.14797 8.61999 3.03997 8.87399C2.93197 9.12799 3.04997 9.42199 3.30397 9.52999L4.80397 10.17Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M14.039 3.28598L9.077 1.37798C8.384 1.11098 7.616 1.11098 6.923 1.37798L1.962 3.28598C1.383 3.50898 1 4.06498 1 4.68598V11.312C1 11.933 1.382 12.489 1.962 12.712L6.923 14.62C7.616 14.887 8.384 14.887 9.077 14.62L14.039 12.712C14.618 12.489 15 11.933 15 11.312V4.68598C15 4.06498 14.618 3.50898 14.039 3.28598ZM7.5 13.757C7.426 13.738 7.354 13.715 7.282 13.687L2.32 11.779C2.127 11.705 2 11.519 2 11.312V4.97098L7.5 7.32798V13.757ZM2.564 4.12598L7.282 2.31098C7.744 2.13298 8.256 2.13298 8.718 2.31098L13.436 4.12598L8 6.45598L2.564 4.12598ZM14 11.313C14 11.52 13.873 11.705 13.68 11.78L8.718 13.688C8.646 13.716 8.574 13.739 8.5 13.758V7.32998L14 4.97298V11.313Z"
      />
    </svg>
  );
}

With react-icons

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

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

package.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
    d="M6 8.63998C5.934 8.63998 5.867 8.62698 5.803 8.59898L3.303 7.52898C3.049 7.42098 2.931 7.12698 3.04 6.87298C3.149 6.61998 3.444 6.50098 3.696 6.60998L6.196 7.67998C6.45 7.78798 6.568 8.08198 6.459 8.33598C6.378 8.52498 6.193 8.63898 6 8.63898V8.63998Z"
  />
  <path
    d="M4.80397 10.17C4.86797 10.197 4.93397 10.21 4.99997 10.21C5.19397 10.21 5.37897 10.096 5.45997 9.90599C5.56797 9.65199 5.44997 9.35799 5.19597 9.24999L3.69597 8.60999C3.44397 8.50199 3.14797 8.61999 3.03997 8.87399C2.93197 9.12799 3.04997 9.42199 3.30397 9.52999L4.80397 10.17Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M14.039 3.28598L9.077 1.37798C8.384 1.11098 7.616 1.11098 6.923 1.37798L1.962 3.28598C1.383 3.50898 1 4.06498 1 4.68598V11.312C1 11.933 1.382 12.489 1.962 12.712L6.923 14.62C7.616 14.887 8.384 14.887 9.077 14.62L14.039 12.712C14.618 12.489 15 11.933 15 11.312V4.68598C15 4.06498 14.618 3.50898 14.039 3.28598ZM7.5 13.757C7.426 13.738 7.354 13.715 7.282 13.687L2.32 11.779C2.127 11.705 2 11.519 2 11.312V4.97098L7.5 7.32798V13.757ZM2.564 4.12598L7.282 2.31098C7.744 2.13298 8.256 2.13298 8.718 2.31098L13.436 4.12598L8 6.45598L2.564 4.12598ZM14 11.313C14 11.52 13.873 11.705 13.68 11.78L8.718 13.688C8.646 13.716 8.574 13.739 8.5 13.758V7.32998L14 4.97298V11.313Z"
  />
</svg>

Attribution

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

Package icon in other sets

Similar VS Code Icons icons