Pictograph Unit Stats Block for React

Edit COMMUNITY at the top of the file: members (everyone), active (those drawn solid) and perIcon (what one icon stands for). The icon count, how many are solid, the percent, the second figure and every sentence follow. The members have to divide into whole icons, so keep members and active multiples of perIcon (or round them) and the grid at ten columns.

Yes. The icon is Lucide's User, filled with the text colour; swap it for any Lucide icon (a package, a home, a heart) and keep fill-current if the icon should be solid. On the Vue, Svelte and Solid versions the same icon comes from the framework's Lucide package.

A pictograph reads as a share of a whole, so the whole has to stay on screen. The faint icons are the text colour mixed to 20% into the page background, a solid tint, so they look right in light and dark themes. The count and the sentence say what faint means, so the difference isn't only a difference in tone.

The grid is one image whose name says how many icons there are, what one stands for and how many are solid and faint, and the counts are also in the figures above it and the sentence below. The icons are decorative. The counting number ends on the real value in every case, and with reduced motion it shows the value at once and the icons simply appear.

The icons are a ten-column grid that scales with the panel, so the rows keep their shape from 320 pixels up: about 17 pixels wide at 320, 24 at 390 and 36 from sm. The two figures stay side by side, and the card in card gives way to the rails with a few pixels of margin.