When the icon set has six clouds and no danfo.
I built African Icon Library because many of the objects, places and routines familiar across African life are still missing from the icon sets designers inherit. The released system brings 30 icons and 54 country maps into a searchable site, React components and a Figma plugin.
Making room for African everyday life
The icon libraries designers inherit are very good at generic interface symbols. They have far less room for the things that make African products recognisable: local transport, food, clothing, markets and everyday routines. I built African Icon Library to bring those references into the tools designers already use.
The released library contains 30 icons across seven categories and 54 country maps, available as SVGs, React components, a searchable website and a Figma plugin.
Drawing a consistent language
Each icon follows a 24 × 24 grid, 1.5-unit regular stroke and rounded caps and joins. The categories have distinct colour fields, but a danfo and a passport need to feel equally at home in one interface.
The clay pot crossed the live area in an earlier drawing. I adjusted the shape to keep its recognisable silhouette while making it legible at 16 pixels. The talking drum and danfo follow the same rule: establish the silhouette, then the detail.
Small enough for an interface
A useful icon needs to work as a tiny control before it becomes a hero illustration. The same drawings were tested at 16, 24, 32 and 48 pixels and carried into product navigation, payments and transport.
54 maps and four deliberate decisions
The map collection covers 54 African UN member states, organised into five regions and drawn in the library's shared line style. Every outline needs to keep its proportions even when it becomes an icon-sized asset.
Morocco is represented without Western Sahara. Tanzania retains Unguja and Pemba at their actual positions. Rodrigues and Annobón keep their shapes and bearings in inset treatments. The borders shown do not imply endorsement of territorial claims.
Finding, checking and inserting
The searchable site lets designers filter a category, inspect an icon and copy its SVG. The Figma plugin takes the same released asset and inserts it as editable vectors inside a selected frame.
One source, every surface
The SVG, typed metadata, React component and editable design vector all come from one source. Keeping that contract shared prevents the library from drifting between the website, code and design tools.
One visual language
The work extends to transit signage, a magazine contents spread, spice packaging and product interfaces. They show how familiar African references can become ordinary, reusable design materials.
