Icons

Ikon Patepang is one family of 580 icons, drawn from nothing for Patepang. Every icon is one skeleton on a grid of 24, and its four weights are read from that skeleton, so an icon cannot differ in shape from one weight to the next.

Ends and corners are round, as in the wordmark: one stroke, with round ends. The caret is the wordmark’s pamepet.

Where another icon set has an icon for the same thing, ours keeps the name people already know from Phosphor, so replacing one with the other changes an import and nothing else. Icons for Patepang’s own ideas carry their Indonesian names.

Each weight has one job. Thin and light strokes are not offered: at small sizes they fall under the contrast a mark needs.

Regular and fill share one outline, so an icon does not move when it turns active. An icon made only of lines, such as an arrow or a check, has no body to fill: its fill is its bold drawing.

Five sizes, each with the weight it is drawn in.

An icon lives in 20 × 20 of its 24 × 24, with a margin of 2 on every side, and the outside of a regular stroke falls exactly on that margin. Four keylines hold the family to one size by eye: a circle of 20, a square of 18, an upright shape of 16 × 20 and a flat one of 20 × 16.

The strokes come from the stems of Patepang Sans. A regular icon at 20 beside 16 px text draws a stroke of 1.25 px against a stem of 1.28 px; a bold one, 1.875 px against the SemiBold’s 1.82 px.

Corners of containers have three radii, 2, 3 and 4 on the outside: the interface’s corners of 8, 12 and 16 divided by four. Dots are round and a little wider than the stroke beside them, as in the typeface.

Beside words an icon sits on the middle of the capitals. On the web that is two lines of CSS; in the app, the row centers its items.

.ic       { width: 1.25em; height: 1.25em; vertical-align: -0.26em; }  /* 20 in 16 px text */
.ic--teks { width: 1em;    height: 1em;    vertical-align: -0.135em; } /* as tall as the text */

Eighteen icons belong to no other set: they draw Patepang’s own ideas, and they are named as the app names those ideas. Tempel is two phones leaning until they touch.

• tempelTempel
• penjagaPenjaga
• tempel-ulangTempel ulang
• goyangGoyang bersama
• sekali-lihatSekali lihat
• titik-lahirTitik lahir
• kunci-daruratKunci darurat
• kunci-matiKunci mati
• pertanyaanPertanyaan ke lingkaran
• lingkaran-dekatLingkaran dekat
• lokasi-sementaraLokasi sementara
• tempel-tertundaTempel tertunda
• tempel-bantuTempel bantu
• pesan-menghilangPesan menghilang
• percakapan-terkunciPercakapan terkunci
• papanPapan
• pemulihanPemulihan
• frasa-sandiFrasa sandi

Do

• One icon, one meaning. An icon says what a row is; it does not decorate it.
• Draw icons in the color of the words beside them.
• Give an icon that stands alone a label a screen reader can say; hide the ones that only repeat the words beside them.
• Use fill for the active state together with another cue: a word, a position, a shape.
• Keep a padlock for privacy.

Do not

• Put icons on colored tiles, or tint them to decorate.
• Use an emoji where an icon belongs.
• Give one icon two meanings, or one meaning two icons.
• Mix in icons from another set, or redraw one of these by hand.
• Use a weight to mean something on its own.

Some things are left undrawn on purpose: places of worship, because drawing some means choosing; alcoholic drinks; the logos of other brands; and national flags.

All 580, by category. An icon named in blue is one of Patepang’s own.

In code an icon is one import, by its name. Nothing else of the family reaches the app or the page.

// patepang.com
import { HouseIcon } from '@patepang/icons/react/House';

// the app
import { HouseIcon } from '@patepang/icons/native/House';

<HouseIcon size={24} weight="fill" />

Each takes a size, a weight and a color, and draws in the color of the text around it unless told otherwise. The package is for Patepang’s own products; the files are not offered here.

Version 0.4 is being tested. Before it is final:

• It is installed in the app and on patepang.com, which both still draw Phosphor today.
• Every icon is looked at on real phones, at the sizes it is used.
• The 136 icons drawn ahead of any screen are tried at 16 and 20 px.
• Its license, still a draft, is reviewed by a lawyer.