Gentleface › Math & symbols › tally-marks

tally-marks icon

Tally marks: tally, tally count, count marks. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 8.691L6 2.5C6 2.359 6.048 2.241 6.144 2.144C6.241 2.048 6.359 2 6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 8.191L9 7.191L9 2.5C9 2.359 9.048 2.241 9.144 2.144C9.241 2.048 9.359 2 9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5L10 6.691L12 5.691L12 2.5C12 2.359 12.048 2.241 12.144 2.144C12.241 2.048 12.359 2 12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 5.191L13.276 5.053C13.402 4.99 13.53 4.98 13.659 5.023C13.788 5.066 13.884 5.15 13.947 5.276C14.009 5.4 14.018 5.527 13.974 5.658C13.931 5.789 13.847 5.885 13.724 5.947L13 6.309L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14C12.359 14 12.241 13.952 12.144 13.856C12.048 13.759 12 13.641 12 13.5L12 6.809L10 7.809L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14C9.359 14 9.241 13.952 9.144 13.856C9.048 13.759 9 13.641 9 13.5L9 8.309L7 9.309L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14C6.359 14 6.241 13.952 6.144 13.856C6.048 13.759 6 13.641 6 13.5L6 9.809L4 10.809L4 13.5C4 13.641 3.952 13.759 3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 11.309L1.724 11.947C1.598 12.01 1.47 12.02 1.341 11.977C1.212 11.934 1.116 11.85 1.053 11.724C0.99 11.598 0.98 11.47 1.023 11.341C1.066 11.212 1.15 11.116 1.276 11.053L3 10.191L3 2.5C3 2.359 3.048 2.241 3.144 2.144C3.241 2.048 3.359 2 3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5L4 9.691L6 8.691Z"/></svg>

React

// Gentleface "tally-marks" (line-round), MIT. https://gentleface.com/icons/tally-marks
import type { SVGProps } from 'react';

export function TallyMarksIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6 8.691L6 2.5C6 2.359 6.048 2.241 6.144 2.144C6.241 2.048 6.359 2 6.5 2C6.641 2 6.759 2.048 6.856 2.144C6.952 2.241 7 2.359 7 2.5L7 8.191L9 7.191L9 2.5C9 2.359 9.048 2.241 9.144 2.144C9.241 2.048 9.359 2 9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5L10 6.691L12 5.691L12 2.5C12 2.359 12.048 2.241 12.144 2.144C12.241 2.048 12.359 2 12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 5.191L13.276 5.053C13.402 4.99 13.53 4.98 13.659 5.023C13.788 5.066 13.884 5.15 13.947 5.276C14.009 5.4 14.018 5.527 13.974 5.658C13.931 5.789 13.847 5.885 13.724 5.947L13 6.309L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14C12.359 14 12.241 13.952 12.144 13.856C12.048 13.759 12 13.641 12 13.5L12 6.809L10 7.809L10 13.5C10 13.641 9.952 13.759 9.856 13.856C9.759 13.952 9.641 14 9.5 14C9.359 14 9.241 13.952 9.144 13.856C9.048 13.759 9 13.641 9 13.5L9 8.309L7 9.309L7 13.5C7 13.641 6.952 13.759 6.856 13.856C6.759 13.952 6.641 14 6.5 14C6.359 14 6.241 13.952 6.144 13.856C6.048 13.759 6 13.641 6 13.5L6 9.809L4 10.809L4 13.5C4 13.641 3.952 13.759 3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 11.309L1.724 11.947C1.598 12.01 1.47 12.02 1.341 11.977C1.212 11.934 1.116 11.85 1.053 11.724C0.99 11.598 0.98 11.47 1.023 11.341C1.066 11.212 1.15 11.116 1.276 11.053L3 10.191L3 2.5C3 2.359 3.048 2.241 3.144 2.144C3.241 2.048 3.359 2 3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5L4 9.691L6 8.691Z" />
    </svg>
  );
}

Vue

Vue: see /icons/tally-marks.md

Svelte

Svelte: see /icons/tally-marks.md

HTML img

HTML img: see /icons/tally-marks.md

CSS

CSS: see /icons/tally-marks.md

Data URL

Data URL: see /icons/tally-marks.md

Sprite

Sprite: see /icons/tally-marks.md

SwiftUI

SwiftUI: see /icons/tally-marks.md

Compose

Compose: see /icons/tally-marks.md

Android XML

Android XML: see /icons/tally-marks.md

Flutter

Flutter: see /icons/tally-marks.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { TallyMarksIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

tally, tally count, count marks

Tags

tally, tally marks, count, counting, five, score, scoring, survey, census, hash marks, five-bar gate

Category

Math & symbols

Component name

TallyMarksIcon

History

2026-11-07 20 px drawn, 24 px drawn, added, released in 0.5.0

Since

version 0.5.0

More math & symbols icons

alpha ampersand command congruent-to diameter divide equal equal-not function function-alert function-check function-search function-sparkle greater-than greater-than-or-equal hash · all math & symbols icons

For agents

Metadata: /icons/tally-marks.json · Markdown: /icons/tally-marks.md · SVG: https://gentleface.com/svg/{style}/16/tally-marks.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/tally-marks.png

tally-marks icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More math & symbols icons

For agents

tally-marks icon