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

VS Code Icons · VscOctoface

Octoface icon

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

components/icons/vscode-codicons-octoface.tsx

import * as React from "react";

/**
 * Octoface from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/octoface. Sized in em, colored by currentColor.
 */
export function VscOctofaceIcon(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="M13.8625 5.67254C13.9762 5.39254 14.3438 4.28129 13.7487 2.77629C13.7487 2.77629 12.83 2.48754 10.7388 3.91379C9.86375 3.66879 8.9275 3.63379 8 3.63379C7.0725 3.63379 6.13625 3.66879 5.26125 3.91379C3.17 2.47879 2.25125 2.77629 2.25125 2.77629C1.65625 4.28129 2.02375 5.39254 2.1375 5.67254C1.42875 6.43379 1 7.41379 1 8.60379C1 13.11 3.91375 14.125 7.9825 14.125C12.0513 14.125 15 13.11 15 8.60379C15 7.41379 14.5712 6.43379 13.8625 5.67254ZM8 13.2675C5.1125 13.2675 2.7675 13.1363 2.7675 10.3363C2.7675 9.67129 3.1 9.04129 3.66 8.52504C4.59625 7.66754 6.1975 8.12254 8 8.12254C9.81125 8.12254 11.395 7.66754 12.34 8.52504C12.9087 9.04129 13.2325 9.66254 13.2325 10.3363C13.2325 13.1275 10.8875 13.2675 8 13.2675ZM5.80375 8.88379C5.22625 8.88379 4.75375 9.58379 4.75375 10.4413C4.75375 11.2988 5.22625 12.0075 5.80375 12.0075C6.38125 12.0075 6.85375 11.3075 6.85375 10.4413C6.85375 9.57504 6.38125 8.88379 5.80375 8.88379ZM10.1962 8.88379C9.61875 8.88379 9.14625 9.57504 9.14625 10.4413C9.14625 11.3075 9.61875 12.0075 10.1962 12.0075C10.7738 12.0075 11.2463 11.3075 11.2463 10.4413C11.2463 9.57504 10.7825 8.88379 10.1962 8.88379Z"
      />
    </svg>
  );
}

With react-icons

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

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

octoface.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="M13.8625 5.67254C13.9762 5.39254 14.3438 4.28129 13.7487 2.77629C13.7487 2.77629 12.83 2.48754 10.7388 3.91379C9.86375 3.66879 8.9275 3.63379 8 3.63379C7.0725 3.63379 6.13625 3.66879 5.26125 3.91379C3.17 2.47879 2.25125 2.77629 2.25125 2.77629C1.65625 4.28129 2.02375 5.39254 2.1375 5.67254C1.42875 6.43379 1 7.41379 1 8.60379C1 13.11 3.91375 14.125 7.9825 14.125C12.0513 14.125 15 13.11 15 8.60379C15 7.41379 14.5712 6.43379 13.8625 5.67254ZM8 13.2675C5.1125 13.2675 2.7675 13.1363 2.7675 10.3363C2.7675 9.67129 3.1 9.04129 3.66 8.52504C4.59625 7.66754 6.1975 8.12254 8 8.12254C9.81125 8.12254 11.395 7.66754 12.34 8.52504C12.9087 9.04129 13.2325 9.66254 13.2325 10.3363C13.2325 13.1275 10.8875 13.2675 8 13.2675ZM5.80375 8.88379C5.22625 8.88379 4.75375 9.58379 4.75375 10.4413C4.75375 11.2988 5.22625 12.0075 5.80375 12.0075C6.38125 12.0075 6.85375 11.3075 6.85375 10.4413C6.85375 9.57504 6.38125 8.88379 5.80375 8.88379ZM10.1962 8.88379C9.61875 8.88379 9.14625 9.57504 9.14625 10.4413C9.14625 11.3075 9.61875 12.0075 10.1962 12.0075C10.7738 12.0075 11.2463 11.3075 11.2463 10.4413C11.2463 9.57504 10.7825 8.88379 10.1962 8.88379Z"
  />
</svg>

Attribution

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

Similar VS Code Icons icons