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

VS Code Icons · VscMagnet

Magnet icon

A free magnet 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/magnet.json

components/icons/vscode-codicons-magnet.tsx

import * as React from "react";

/**
 * Magnet from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/magnet. Sized in em, colored by currentColor.
 */
export function VscMagnetIcon(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="M8.58702 2.02801C6.87302 1.86101 5.23102 2.40801 3.96402 3.55901C2.71502 4.69401 1.99902 6.31301 1.99902 8.00001V13C1.99902 13.551 2.44802 14 2.99902 14H4.99902C5.55002 14 5.99902 13.551 5.99902 13V8.00001C5.99902 7.43601 6.23902 6.89501 6.65802 6.51701C7.08202 6.13301 7.63602 5.95301 8.20702 6.01101C9.21202 6.11101 9.99902 7.04801 9.99902 8.14301V13C9.99902 13.551 10.448 14 10.999 14H12.999C13.55 14 13.999 13.551 13.999 13V8.23601C13.999 5.04401 11.623 2.31701 8.58702 2.02801ZM3.00002 13V11H5.00002V13H3.00002ZM8.30802 5.01601C8.20702 5.00601 8.10702 5.00101 8.00702 5.00101C7.26302 5.00101 6.54102 5.27501 5.98802 5.77501C5.36002 6.34301 5.00002 7.15401 5.00002 8.00001V10H3.00002V8.00001C3.00002 6.59401 3.59702 5.24501 4.63802 4.29901C5.69302 3.34001 7.06702 2.89001 8.49302 3.02301C11.02 3.26401 13 5.55401 13 8.23601V10H11V8.14301C11 6.54001 9.81702 5.16701 8.30802 5.01601ZM11 13V11H13V13H11Z"
      />
    </svg>
  );
}

With react-icons

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

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

magnet.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="M8.58702 2.02801C6.87302 1.86101 5.23102 2.40801 3.96402 3.55901C2.71502 4.69401 1.99902 6.31301 1.99902 8.00001V13C1.99902 13.551 2.44802 14 2.99902 14H4.99902C5.55002 14 5.99902 13.551 5.99902 13V8.00001C5.99902 7.43601 6.23902 6.89501 6.65802 6.51701C7.08202 6.13301 7.63602 5.95301 8.20702 6.01101C9.21202 6.11101 9.99902 7.04801 9.99902 8.14301V13C9.99902 13.551 10.448 14 10.999 14H12.999C13.55 14 13.999 13.551 13.999 13V8.23601C13.999 5.04401 11.623 2.31701 8.58702 2.02801ZM3.00002 13V11H5.00002V13H3.00002ZM8.30802 5.01601C8.20702 5.00601 8.10702 5.00101 8.00702 5.00101C7.26302 5.00101 6.54102 5.27501 5.98802 5.77501C5.36002 6.34301 5.00002 7.15401 5.00002 8.00001V10H3.00002V8.00001C3.00002 6.59401 3.59702 5.24501 4.63802 4.29901C5.69302 3.34001 7.06702 2.89001 8.49302 3.02301C11.02 3.26401 13 5.55401 13 8.23601V10H11V8.14301C11 6.54001 9.81702 5.16701 8.30802 5.01601ZM11 13V11H13V13H11Z"
  />
</svg>

Attribution

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

Magnet icon in other sets

Similar VS Code Icons icons