# 3 · Kinds: icons, illustrations, photos and diagrams Each kind of image has its own craft. Icons are a small language and only work when every word is spelt the same way. Illustrations are a style that has to be kept. Photos are mostly about the crop. Diagrams only work when they can be read at the size they're shown. --- ### I1 · One icon set, one style **Rule:** Use one icon set across the whole product: the one in `DESIGN.md` or the codebase, or, if there's none, one well-made library (Lucide, Phosphor, Heroicons, Material Symbols, Tabler) chosen to match the feel. Keep one stroke weight (for example 1.5px or 2px at 24px) and one style: outline **or** filled. Use the filled version of an icon only to show a state of that same icon, such as the selected tab. When the set lacks an icon you need, pick the nearest one from the same set, or draw one on the set's grid with its stroke, corners and end caps. Never fill the gap from another set. **Why:** People read icons as a family (`pro/ui-design/3-humans.md` A4). One icon that's heavier, rounder or filled looks more important or different, and people wonder why. Mixed sets also make the whole interface look unfinished. **Agent trap:** using Heroicons for most of the page, then adding a brand icon from Font Awesome and an emoji for "new" because they were the first results. The row now has three line weights and a colour emoji (`pro/ui-design/7-avoid.md`). **Check:** list where every icon on the page came from. All from one set? Run `checks/images.js`: it reports rows where icons have different sizes, stroke weights, or mix filled and outline. > **In ihumane Pro** (https://ihumane.ai/#pricing): > - I2 · Icons sit on one size grid and line up with their text > - I3 · An icon's meaning is clear on its own, or it has a label > - I4 · Illustrations are a small, written-down system > - I5 · Photos: crop for the subject, keep the set alike > - I6 · Diagrams and simple charts are readable at the size shown