{"collectionById":{"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde":{"id":"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde","name":"Blog Articles","fieldSchemas":[{"id":"112a5d36-c2fe-4270-89db-11332b6d141c","name":"Topic","type":"plain_text"},{"id":"0b77f83b-c31a-4889-b9b3-9a6d2e41fc86","name":"Author Bio","type":"rich_text"},{"id":"0a981f8a-7dbb-440d-a940-25d9060c9b11","name":"Author Job Title","type":"plain_text"},{"id":"402ba26f-8f6d-4f5f-bf20-62e6549f4ad4","name":"Slug","type":"slug","role":"slug"},{"id":"df1c88d1-4bd8-4ecd-9059-463b9589de92","name":"Author Name","type":"plain_text"},{"id":"1f58afa6-2748-4188-b4a4-f1e54e37eca9","name":"Hero Image","type":"image"},{"id":"3084d9ba-ab55-4e5a-931b-b9db3d09105f","name":"Article Content","type":"rich_text"},{"id":"b7712ee6-f9fd-4781-8c5c-e7e10ce8f81e","name":"Publish Date","type":"date"},{"id":"f2ba59b9-49cc-4ec6-9416-bda99d4c8383","name":"Title","type":"plain_text","role":"primary"},{"id":"676063ae-971f-41f4-a8ff-51f75c78431d","name":"Reading Time","type":"plain_text"},{"id":"7eeb4aed-e691-4ca9-b11a-c4bff166e4f6","name":"Summary","type":"plain_text"}],"itemById":{"36a64540-e6cb-4591-82be-dd3cf13f3168":{"id":"36a64540-e6cb-4591-82be-dd3cf13f3168","index":"'l","collectionId":"d4a5b68c-8afd-4bbe-a7ac-e9a8422fedde","fields":[{"id":"7f42c466-a9b8-41e1-9411-e22dca201b45","value":"{\"image\":\"84b77b8954cd1c20310d43787cb2355fbe7d5bc8\",\"imageThumbnail\":\"38b4183852f9bab48f1269df124ccf68b074786b\",\"originalImageHeight\":1066,\"originalImageWidth\":1600,\"altText\":\"\",\"fileName\":\"letters-grids-and-building-icons.jpg\"}","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"1f58afa6-2748-4188-b4a4-f1e54e37eca9"},{"id":"16d3ca35-f8d9-48a4-8515-3219361944c0","value":"2026-07-30","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"b7712ee6-f9fd-4781-8c5c-e7e10ce8f81e"},{"id":"7d67dddd-da42-49c9-ad6e-f192920fe870","value":"Where Your Icon's Numbers Come From: Letters, Grids and Keyshapes","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"f2ba59b9-49cc-4ec6-9416-bda99d4c8383"},{"id":"0399c9ff-b30d-4813-86e3-177d72d69d26","value":"Senior Experience Designer · Design Educator","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"0a981f8a-7dbb-440d-a940-25d9060c9b11"},{"id":"518c143b-6b60-402b-9f4b-ca1cf49c756e","value":"Iconography","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"112a5d36-c2fe-4270-89db-11332b6d141c"},{"id":"f78b9fad-853b-42fa-81a1-b04a67e2196f","value":"8 min read","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"676063ae-971f-41f4-a8ff-51f75c78431d"},{"id":"1b24de21-69d9-4888-89cf-cbd726fa33f5","value":"{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Where do the numbers in your icon come from? The stroke weight, the size of the circle, how far the drawing is allowed to reach toward the edge?\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"If the honest answer is \\\"it looked right\\\", that's fine for one icon. It falls apart at ten. The good news is that you don't have to invent those numbers. Type designers have been solving this exact problem for about a century, and interface systems have written most of the rest down. You can borrow from both.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Type was always a grid\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Four times in the twentieth century, someone had to draw an alphabet that other people would reproduce without them in the room. All four times the answer was the same: a grid and a set of written rules.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"DIN 1451 (1930s):\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" a coarse construction grid so letters could be rebuilt with compass and ruler.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Univers (1957):\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" a two-digit numbering system for its variants, so nobody had to argue about names.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Transport (late 1950s):\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" mixed case for British road signs, so words keep a recognizable outline.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Frutiger (designed for Charles de Gaulle airport from 1968):\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" wide openings and a tall x-height to read from a distance.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":4}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"None of them started by drawing. They started by deciding which numbers they'd draw with. Otl Aicher did the same for Munich 1972: grid, palette and typeface first, pictograms after.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"A letter has measurements, not moods\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The four lines.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Cap height, x-height, baseline and descender. Every typeface has the same four, which makes them useful for comparing.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Why the x.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" It's the one lowercase letter with a flat top, a flat bottom, and nothing that pokes above or below. The o overshoots, the a overshoots, the b goes up, the p goes down. Any other letter would give you a misleading measurement.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Overshoot.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" If you draw an o exactly as tall as the x, the o looks smaller. Round shapes are drawn slightly bigger so they look the same size. This applies directly to icons: a circle on your grid has to be bigger than the square next to it.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The stem.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" The vertical stroke of a letter. Its thickness is your stroke weight. Measure it on the H, not the l: in many typefaces the l has a tail and the capital I has serifs, and you'd end up measuring those instead.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Choosing a typeface for an icon set\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"If your icons will sit next to text, or if you want a principled source for their numbers, pick a companion typeface. Not because you like it. Because it meets criteria you can check.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Three requirements that aren't negotiable:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Real weights.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" At least light, regular and bold, drawn by the type designer. Not the fake bold some software makes by fattening the outline. If you'll ever need icon weights, you need type weights to derive them from.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"A tall x-height.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" That's what keeps it readable when everything gets small.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Square terminals.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Straight cuts, no teardrops or quirky finishes. Something you can reproduce with a stroke tool.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"number\",\"start\":1,\"tag\":\"ol\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"What to look at, and what it does to your icons:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Stem\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Your stroke thickness. Copy it, don't invent it\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"X-height\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Where the body of the icon lives\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Cap height\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": The ceiling when the icon sits next to uppercase text\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Counters and apertures\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Closed openings clog at small sizes, and your icons inherit the problem\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":4},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Terminals\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Straight, angled or rounded. Whichever you pick applies to every icon\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":5},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Contrast\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": If the letters vary in thickness, a perfectly even icon will look foreign next to them\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":6},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Available weights\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": No real weights, no icon weights\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":7}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"How to rule out a candidate fast.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Type \\\"Hxop\\\". Switch it to bold: if it thickens evenly and clumsily, it's a fake weight. Shrink it: if the o and e close up and start to look the same, drop it. Then type a real label from your project at small size. If you read it without effort, keep it.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"A few free, open typefaces that pass: IBM Plex Sans, Inter, Work Sans, Public Sans and Source Sans 3.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Getting your two numbers, no math required.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Type an H in the regular weight at the size your icons will be used. Measure the vertical stem. That's your stroke, as is. Then set a word next to your icon grid at the same size and see which row the top of the x lands on. That row is your x-line, and it's where the body of the icon should reach. If it falls between two rows, take the closer one.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The 24 unit grid\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The grid isn't a pretty background. It's a contract: it says how far the drawing can go, how thick the stroke is, and which shapes are allowed.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Why 24.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" It divides into halves, thirds, quarters, sixths and eighths without fractions, and it's the standard size for interface icons.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":1,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Four terms get confused all the time:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Canvas\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": What it is: The full box the icon lives in; In plain words: The paper\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Live area\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": What it is: The zone where the drawing may reach; In plain words: How far you can draw\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Padding\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": What it is: The space between the live area and the edge of the canvas; In plain words: The air outside\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Safe area\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": What it is: The zone where the drawing always reads, even if the icon is cropped, scaled or placed next to another; In plain words: The part you never sacrifice\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":4}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The live area is a drawing limit. The safe area is a reading guarantee. They aren't the same thing, and you'll notice the difference the first time you shrink an icon to 16 pixels and everything touching the edge disappears.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Here's how three systems set it up:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Material Design (Material 1 spec)\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Canvas: 24 by 24 dp; Live area: 20 by 20 dp; Padding: 2 dp per side\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"IBM Carbon\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Canvas: 32 by 32 px; Live area: 28 px; Padding: 2 px\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Shopify Polaris\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Canvas: 20 by 20 px; Live area: 16 by 16 px; Padding: not specified\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The Material numbers come from the archived Material 1 guidelines. They're still the industry's default, but cite them as the legacy spec, not as Google's current guidance.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Keyshapes and optical correction\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Material's 24 dp grid defines four keyshapes, the base forms most icons are built from:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Square: 18 by 18\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Circle: 20 in diameter\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Vertical rectangle: 16 wide by 20 tall\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Horizontal rectangle: 20 wide by 16 tall\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The circle is bigger than the square on purpose. It's overshoot again. As one icon vendor puts it, if you make a circle and a square exactly the same size, the square will always look bigger. Font Awesome gives a neat way to see why: a 12 by 16 rectangle has an area of 192, while a 14 by 14 square has 196. Matching the bounding box doesn't match the visual weight. Matching the area gets you closer.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Apple calls it optical alignment. Carbon calls it optical centering. The adjustments are tiny and the effect is large. \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"What measures equal doesn't look equal, and the eye wins.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Stroke, angles, terminals\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"IBM's icon guidelines are a good model of how specific a spec can be:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Stroke:\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" one weight across all icons, with exceptions only for very dense icons. Never mix weights inside one icon.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Angles:\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" 45 degrees for clean antialiasing, other angles in 15 degree steps.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Corners:\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" a consistent radius.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Carbon also shows how everything scales together:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"32 px\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Stroke: 2 px; Padding: 2 px; Live area: 28 px; Radius: 2 px\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"24 px\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Stroke: 1.5 px; Padding: 1.5 px; Live area: 21 px; Radius: 1.5 px\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"20 px\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Stroke: 1.25 px; Padding: 1.25 px; Live area: 17.5 px; Radius: 1.25 px\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"16 px\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\": Stroke: 1 px; Padding: 1 px; Live area: 14 px; Radius: 1 px\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":4}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Terminals are where the big systems openly disagree. Shopify Polaris uses round terminals, even where one shape cuts into another. Atlassian uses square line caps, with rounded outer corners and sharp inner ones, so strokes land on the pixel edge and stay crisp. There's no universal rule, only a documented decision. What you can't do is have no decision.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"From photo to pictogram\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The drawing process that works best follows four steps:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Observe.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" The real thing, photographed. Not the idea you have of it, and never someone else's icon. Copying an icon means inheriting decisions you didn't make. Drawing from memory means drawing the cartoon version.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Reduce.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Keep what's essential, drop what's accessory.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Regularize.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Bring it onto the grid: angles, strokes, radii. This is where the family is born.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Test.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Show it to someone who didn't draw it. If they can't read it, go back to step 2.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":4}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"number\",\"start\":1,\"tag\":\"ol\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"There are three ways to approach almost any subject, and each behaves differently when it shrinks. Take a bird. A \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"silhouette\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" (the whole animal in profile) loses its legs first. A \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"bust\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" (head and chest) usually holds up best. A \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"part\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" (just the wing) is the riskiest and the most memorable. All three get built the same way: simple shapes stacked on the grid, merged into one outline, then stroked.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Two quick checks. Shrink the icon until it fits on your thumbnail: if you still know what it is, keep it. Then put it next to the word written in your companion typeface: if it looks thinner or heavier than the letters, the stroke is wrong.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"A practical tip: \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"draw in line first.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" From a line icon you can derive filled and two-tone versions almost for free. The reverse doesn't work. You can't get a clean line version out of a solid shape without redrawing it.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Vector hygiene\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Three settings break more icon sets than bad drawing does:\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Stroke alignment.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Inside, center or outside. With a centered stroke, half of it spills out and your 20 unit box reads as 22. Pick one and use it everywhere.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Outline the stroke.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" It freezes the thickness into geometry. It can't be undone, so do it on a copy.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Whole numbers.\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" Everything lands on whole values. Half a pixel is a blurry edge.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"textFormat\":1,\"value\":3}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"textFormat\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Try this\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Write your grid spec on a single page: canvas, live area, padding, keyshapes, stroke, angles, radius, terminals, and the typeface it was derived from. Hand it to another designer and ask them to draw one new icon with it without seeing yours and without asking you anything. Whatever comes out wrong is what your page didn't say.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Further reading\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"heading\",\"version\":1,\"tag\":\"h2\"},{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Material Design (Material 1 archive), \\\"Icons\\\", system icon guidelines.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"IBM Design Language, \\\"UI icons\\\".\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Shopify Polaris, \\\"Creating icons\\\".\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Atlassian Design System, \\\"Iconography\\\".\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4},{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"Jon Hicks, \",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":2,\"mode\":\"normal\",\"style\":\"\",\"text\":\"The Icon Handbook\",\"type\":\"text\",\"version\":1},{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\" (2011).\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":5}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"3084d9ba-ab55-4e5a-931b-b9db3d09105f"},{"id":"3e35d0fc-76c4-44a0-9e10-aeba288f39b5","value":"{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"I design interfaces, design systems and motion for enterprise products, and I teach graphic design at Universidad de Monterrey.\",\"type\":\"text\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"0b77f83b-c31a-4889-b9b3-9a6d2e41fc86"},{"id":"7140d657-ecea-498e-92d6-3f6a7afdeeca","value":"Hugo Villarreal","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"df1c88d1-4bd8-4ecd-9059-463b9589de92"},{"id":"bb44d027-44ce-4d41-9d6a-2ea2b38b3bab","value":"Hugo Villarreal","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"df1c88d1-4bd8-4ecd-9059-463b9589de92"},{"id":"a79096c6-5a44-4e73-aa0c-b5eeada07415","value":"How to borrow stroke weight and proportions from a typeface, set up an icon grid, and make optical corrections so a set reads as one family.","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"7eeb4aed-e691-4ca9-b11a-c4bff166e4f6"},{"id":"8b4907fd-c539-401e-8330-e5e4a61d5fcb","value":"8 min read","itemId":"36a64540-e6cb-4591-82be-dd3cf13f3168","fieldSchemaId":"676063ae-971f-41f4-a8ff-51f75c78431d"}]}}}},"slugByItemId":{"7c10a08b-d604-4d4d-a009-2400c53b6b59":"understanding-design-systems","8eeee011-eb9d-4fdc-9afe-f856fd33e053":"meeting-figma-slides","bdecb30f-74c1-446a-80d4-315f0db32510":"what-it-takes-to-be-a-good-designer","e44d8219-d7c5-4585-b6f2-3fbb76e9d813":"a-bitten-apple-how-ego-costs-design-teams-progress","b1d7cfd5-94f2-457d-8534-7dc7cd3053f5":"a-readable-timeline-of-graphic-design-history","1b025d59-8cdd-47ab-825c-b44301d9e56c":"computer-buying-guide-for-graphic-designers","7136350e-32b6-4799-a067-2945462c74b9":"anatomy-of-an-infographic","fc376070-6a8e-4885-bc5b-5392f2ea72d4":"design-history-three-eras-part-1-before-modernism","ae5d2846-c99a-4b96-85f4-93be2a63f6cb":"futures-thinking-for-product-designers","778b781d-23e5-45f4-91dd-d0782796c253":"design-history-three-eras-part-2-modernism","36a64540-e6cb-4591-82be-dd3cf13f3168":"letters-grids-and-building-icons","46eb0627-397b-4642-b36b-4eaea8e9375d":"five-directions-in-contemporary-design","c603686b-3d64-4534-bd99-4b3d163907c6":"motion-in-digital-products-guide","1ce96791-887c-4b99-affb-0cb1fa0a94c2":"pestel-for-designers","2d8aef00-9a3b-4648-bc46-0a74a20bac0f":"running-your-own-local-ai-designers-teachers","7c9caf44-7c35-41e3-b325-83ea8fa765b6":"what-is-a-sign-semiotics-primer-for-designers","54d55d03-8f64-4a4e-94a6-397cf873c405":"the-chicken-sandwich-perspective","e56a86ac-292e-4bf6-b613-8cab8595e2b9":"our-2025-nominees-for-best-emerging-technologies-in-ux-ui","b9b45e98-7fbc-4cd2-ad25-4de806cdf16e":"my-config-2024-key-takeaways","ca07284f-3eb9-4f2d-8d05-fa25f9997af1":"15-research-methods-graphic-designers-double-diamond","f63b36ff-7f5a-4ddb-b11c-ed57a874252b":"data-visualization-principles-in-practice","bdbda384-5ec9-43ce-8e04-0bcd9f142e02":"designing-for-users-in-distress","ae609892-49be-47e2-9527-ba51e6252944":"figma-auto-layout-explained","7a86437b-217c-46c5-9832-da017c47a463":"figma-glossary","d8836f58-7886-473c-a7af-fe34ee59cd8a":"five-years-to-get-rich-before-ai-futures-thinking","b4cc4258-88ef-4f0b-89ab-90ba61258b4e":"practical-prompting-for-teachers","92cb182c-ea27-4cc5-9d50-40c5dd1eef7a":"swiss-style-and-the-new-york-school","3654f76a-378a-435e-8d84-bfa6a05f6d7a":"trend-is-a-category-not-a-compliment","016a5dc9-d306-443b-8a0c-784607067d45":"standards-and-legibility-in-signage","0d4f66dd-cb0f-4555-84cb-44bb5624a03c":"ten-improv-rules-for-design-critique","79250f89-4bcd-4ec5-b942-1ce0b4d52b78":"the-avant-gardes-that-still-shape-design","80345e24-6050-439b-9c3b-9e1690a6a5de":"games-design-and-ourselves-please-dont-take-it-the-wrong-way","b4100900-6eb5-4a05-b9b3-ce765168f267":"the-power-of-icebreakers-in-meetings","cc6fe4f9-90f9-4e45-ae3f-b544b044da5a":"ai-ethics-classroom-course-ai-policy","f7429a53-d35f-4e02-8ecf-79254a953eed":"apps-sites-and-games-i-recommend-to-designers","2b3466be-47b4-42f4-9a58-7597a6f22262":"design-history-three-eras-part-3-postmodern-and-digital","7ced4be9-c1c8-40ba-adf8-bc720169b799":"design-thesis-problem-objectives-scope-limitations","c6f9f758-c8bb-4fba-8ca1-1041f2907c86":"how-to-read-an-image-a-practical-toolkit","589e80bb-7281-4b11-8ad5-3c3a72bbd601":"isotype-neurath-arntz-and-the-method","747f580d-9190-4d67-9f5f-0a243e36bce4":"mesoamerica-media-stereotypes-and-better-depictions","fff8a94b-53e2-4624-b63f-cb3466c9146c":"what-the-simpsons-no-no-sheets-teach-us-about-design-systems","240536a4-d1ff-4488-9c25-62af5c228b38":"trend-or-fad-five-criteria","dde2c9c5-d33d-4485-b79f-16a6fc1135f5":"atomic-design-in-figma","5d5b785c-6b20-4cbc-82cc-fab2f5afe573":"cognitive-biases-in-trend-research","25690feb-ad3f-44f9-a3f9-489c185b724c":"designing-icons-for-screens","d1b6da52-8b7c-4a77-8a9a-2385a1f0a71c":"figma-color-variables-design-tokens","542d1e93-a75a-4dea-8266-d92a1a0749ee":"how-to-test-whether-an-icon-works","ae67180a-23b7-4b1f-90c5-f025c7edd0b5":"how-to-use-the-consumer-trend-canvas","36e45f78-face-4cb3-95cd-cbf6e461ae57":"journey-map-ecosystem-map-service-blueprint"}}