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

css.gg · CgTally

Tally icon

A free tally icon from css.gg, 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: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/css-gg/tally.json

components/icons/css-gg-tally.tsx

import * as React from "react";

/**
 * Tally from css.gg (https://github.com/astrit/css.gg), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/css-gg/tally. Sized in em, colored by currentColor.
 */
export function CgTallyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M3.66124 2.67117C3.71341 2.4 3.97956 2.18018 4.2557 2.18018H6.2557C6.53184 2.18018 6.71341 2.4 6.66124 2.67117L5.33877 9.54511C5.2866 9.81628 5.02045 10.0361 4.74431 10.0361H2.74431C2.46817 10.0361 2.2866 9.81628 2.33877 9.54511L3.66124 2.67117Z"
        fill="currentColor"
      />
      <path
        d="M8.66124 2.67117C8.71341 2.4 8.97956 2.18018 9.2557 2.18018H11.2557C11.5318 2.18018 11.7134 2.4 11.6612 2.67117L8.07168 21.329C8.01951 21.6002 7.75336 21.82 7.47722 21.82H5.47722C5.20108 21.82 5.01951 21.6002 5.07168 21.329L8.66124 2.67117Z"
        fill="currentColor"
      />
      <path
        d="M13.6612 2.67117C13.7134 2.4 13.9796 2.18018 14.2557 2.18018H16.2557C16.5318 2.18018 16.7134 2.4 16.6612 2.67117L13.0717 21.329C13.0195 21.6002 12.7534 21.82 12.4772 21.82H10.4772C10.2011 21.82 10.0195 21.6002 10.0717 21.329L13.6612 2.67117Z"
        fill="currentColor"
      />
      <path
        d="M18.6612 2.67117C18.7134 2.4 18.9796 2.18018 19.2557 2.18018H21.2557C21.5318 2.18018 21.7134 2.4 21.6612 2.67117L20.3388 9.54511C20.2866 9.81628 20.0205 10.0361 19.7443 10.0361H17.7443C17.4682 10.0361 17.2866 9.81628 17.3388 9.54511L18.6612 2.67117Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { CgTally } from "react-icons/cg";

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

tally.svg

<svg
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M3.66124 2.67117C3.71341 2.4 3.97956 2.18018 4.2557 2.18018H6.2557C6.53184 2.18018 6.71341 2.4 6.66124 2.67117L5.33877 9.54511C5.2866 9.81628 5.02045 10.0361 4.74431 10.0361H2.74431C2.46817 10.0361 2.2866 9.81628 2.33877 9.54511L3.66124 2.67117Z"
    fill="currentColor"
  />
  <path
    d="M8.66124 2.67117C8.71341 2.4 8.97956 2.18018 9.2557 2.18018H11.2557C11.5318 2.18018 11.7134 2.4 11.6612 2.67117L8.07168 21.329C8.01951 21.6002 7.75336 21.82 7.47722 21.82H5.47722C5.20108 21.82 5.01951 21.6002 5.07168 21.329L8.66124 2.67117Z"
    fill="currentColor"
  />
  <path
    d="M13.6612 2.67117C13.7134 2.4 13.9796 2.18018 14.2557 2.18018H16.2557C16.5318 2.18018 16.7134 2.4 16.6612 2.67117L13.0717 21.329C13.0195 21.6002 12.7534 21.82 12.4772 21.82H10.4772C10.2011 21.82 10.0195 21.6002 10.0717 21.329L13.6612 2.67117Z"
    fill="currentColor"
  />
  <path
    d="M18.6612 2.67117C18.7134 2.4 18.9796 2.18018 19.2557 2.18018H21.2557C21.5318 2.18018 21.7134 2.4 21.6612 2.67117L20.3388 9.54511C20.2866 9.81628 20.0205 10.0361 19.7443 10.0361H17.7443C17.4682 10.0361 17.2866 9.81628 17.3388 9.54511L18.6612 2.67117Z"
    fill="currentColor"
  />
</svg>

Attribution

"Tally" icon from css.gg (https://github.com/astrit/css.gg), licensed under MIT license.

Similar css.gg icons