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

VS Code Icons · VscReactions

Reactions icon

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

components/icons/vscode-codicons-reactions.tsx

import * as React from "react";

/**
 * Reactions from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/reactions. Sized in em, colored by currentColor.
 */
export function VscReactionsIcon(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="M13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C7.08516 13 7.1699 12.9982 7.25419 12.9947C7.14265 12.6779 7.06557 12.3448 7.02746 11.9999L7 12C4.23858 12 2 9.76142 2 7C2 4.23858 4.23858 2 7 2C9.76142 2 12 4.23858 12 7L11.9999 7.02746C12.3448 7.06557 12.6779 7.14265 12.9947 7.25419C12.9982 7.1699 13 7.08516 13 7ZM7.11191 10.4982C7.19558 10.1302 7.32437 9.77927 7.49216 9.45163C7.33305 9.48337 7.16848 9.5 7 9.5C6.25963 9.5 5.59494 9.1788 5.13646 8.66654C4.95229 8.46078 4.6362 8.44327 4.43043 8.62743C4.22467 8.8116 4.20716 9.12769 4.39132 9.33346C5.03148 10.0487 5.96337 10.5 7 10.5C7.03744 10.5 7.07475 10.4994 7.11191 10.4982ZM6 6C6 6.41421 5.66421 6.75 5.25 6.75C4.83579 6.75 4.5 6.41421 4.5 6C4.5 5.58579 4.83579 5.25 5.25 5.25C5.66421 5.25 6 5.58579 6 6ZM8.75 6.75C9.16421 6.75 9.5 6.41421 9.5 6C9.5 5.58579 9.16421 5.25 8.75 5.25C8.33579 5.25 8 5.58579 8 6C8 6.41421 8.33579 6.75 8.75 6.75ZM15 11.5C15 13.433 13.433 15 11.5 15C9.567 15 8 13.433 8 11.5C8 9.567 9.567 8 11.5 8C13.433 8 15 9.567 15 11.5ZM12 9.5C12 9.22386 11.7761 9 11.5 9C11.2239 9 11 9.22386 11 9.5V11H9.5C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12H11V13.5C11 13.7761 11.2239 14 11.5 14C11.7761 14 12 13.7761 12 13.5V12H13.5C13.7761 12 14 11.7761 14 11.5C14 11.2239 13.7761 11 13.5 11H12V9.5Z"
      />
    </svg>
  );
}

With react-icons

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

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

reactions.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="M13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C7.08516 13 7.1699 12.9982 7.25419 12.9947C7.14265 12.6779 7.06557 12.3448 7.02746 11.9999L7 12C4.23858 12 2 9.76142 2 7C2 4.23858 4.23858 2 7 2C9.76142 2 12 4.23858 12 7L11.9999 7.02746C12.3448 7.06557 12.6779 7.14265 12.9947 7.25419C12.9982 7.1699 13 7.08516 13 7ZM7.11191 10.4982C7.19558 10.1302 7.32437 9.77927 7.49216 9.45163C7.33305 9.48337 7.16848 9.5 7 9.5C6.25963 9.5 5.59494 9.1788 5.13646 8.66654C4.95229 8.46078 4.6362 8.44327 4.43043 8.62743C4.22467 8.8116 4.20716 9.12769 4.39132 9.33346C5.03148 10.0487 5.96337 10.5 7 10.5C7.03744 10.5 7.07475 10.4994 7.11191 10.4982ZM6 6C6 6.41421 5.66421 6.75 5.25 6.75C4.83579 6.75 4.5 6.41421 4.5 6C4.5 5.58579 4.83579 5.25 5.25 5.25C5.66421 5.25 6 5.58579 6 6ZM8.75 6.75C9.16421 6.75 9.5 6.41421 9.5 6C9.5 5.58579 9.16421 5.25 8.75 5.25C8.33579 5.25 8 5.58579 8 6C8 6.41421 8.33579 6.75 8.75 6.75ZM15 11.5C15 13.433 13.433 15 11.5 15C9.567 15 8 13.433 8 11.5C8 9.567 9.567 8 11.5 8C13.433 8 15 9.567 15 11.5ZM12 9.5C12 9.22386 11.7761 9 11.5 9C11.2239 9 11 9.22386 11 9.5V11H9.5C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12H11V13.5C11 13.7761 11.2239 14 11.5 14C11.7761 14 12 13.7761 12 13.5V12H13.5C13.7761 12 14 11.7761 14 11.5C14 11.2239 13.7761 11 13.5 11H12V9.5Z"
  />
</svg>

Attribution

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

Similar VS Code Icons icons