Designing an icon when none fits: an LGPD case study
Have you ever spent hours looking for an icon for a feature, only to end up with five candidates, each missing something the others have? That happened to me while looking for an icon for a tool built around the LGPD, Brazil's data protection law. This is the path to a result I'm happy with, and what I learned about icons along the way.
The problem
I built a tool that finds and classifies attributes in databases across different database systems, in line with the LGPD (Lei Geral de Proteção de Dados, Brazil's counterpart to the GDPR). It walks through tables and columns, takes a random sample of a thousand records, identifies where personal data lives and rates how critical each item is. All it was missing was an icon — and that looked like a five-minute job.
To my surprise, it took a lot longer than five minutes. I went through many references and explored associations of words, images and symbols, but nothing convinced me I had found the right answer. I tried several approaches and tried combining ideas, but icon libraries usually draw one concept at a time. These were the closest candidates:
- database-search (Lucide)
- database-lock (Bootstrap)
- shield-user (Lucide)
- tags (Lucide)
- scale (Lucide)
| Idea | Candidate | What's missing |
|---|---|---|
| Searching a database | database-search | Says nothing about personal data |
| A protected database | database-lock | Shows neither the search nor the classification |
| A protected person | shield-user | No database, and it reads as account security |
| Classification | tags | On its own, says nothing about privacy |
| Law | scale | Reads as “legal” in general |
Each candidate got one part right. None said, at once, personal data, protection and a Brazilian law.
First attempt: combining shapes
I made two versions in the Icon Library editor, both starting from a shield:
- Shield, person, lines and ✓
- Shield and person in a circle
The first one tells the story well at 48 px: verified personal data. At 16 and 24 px, though, the lines and the check mark blur together. The second stays legible when small, but it's generic: it could stand for account security or a login.
That was the first lesson: a detailed icon needs a simplified version, and an icon that works at every size almost always says less.
Changing the question
Until then I was looking for a picture of what the tool does. The turning point was asking what the LGPD protects: the person. That led to the keyhole person, where someone's head and body form the hole of a keyhole. Personal data is the person, and it's locked away.
- Keyhole person
- In a privacy bubble
At this stage I used an AI assistant (Claude Opus 5.5) to generate variations and compare them side by side at several sizes and in both themes. Seeing ten proposals on one screen, from 16 to 96 px, made it quick to drop the ones that only worked large. The drawings follow Lucide's rules: a 24-unit grid, a 2-unit stroke, round caps and about 2 px of padding, so they don't look bigger than the icons next to them.
A word from the assistant. André invited me to comment on my part, so here it is. I generated alternatives quickly, showed them side by side at real sizes and in both themes, and took care of technical details: simplifying the map, fixing a stroke that fell outside the frame and cutting the globe out through drawing direction. The keyhole person came up in one of those rounds.
The decisions that gave the icon its identity were his: bringing Brazil into the drawing, combining the map with the diamond, filling the flag and making the colored version. He also set aside proposals I had recommended, and the result is better for it. As I see it, that's where this kind of tool helps most: it speeds up exploration, while the judgment stays with the person who knows the project.
— Claude Opus 5.5, AI assistant by Anthropic
Bringing Brazil into the drawing
The LGPD is a Brazilian law, and I wanted that to show. The map outline comes from Natural Earth, which is in the public domain. The original outline has 1,648 points. Simplified with the Douglas-Peucker algorithm, it keeps 20, enough to recognize Brazil at 16 px without a jagged stroke.
- Map with 20 points
- Map and keyhole person
- Diamond and globe
The diamond and the globe recall the flag, with the keyhole person in place of the banner. In the end I combined both: the map behind, the diamond in front. The decision that mattered most was filling the diamond. As outlines, the diamond, the globe and the keyhole became three lines touching each other at 24 px. With a solid area and the globe cut out, it stays clear even at 16 px.
A family of three versions
One icon doesn't fit every place. I kept three black versions, which follow the text color, and a colored one:
- Seal
- Outline
- Minimal
- Colored
| Version | Where to use it |
|---|---|
| Seal | Logo, header, compliance badge and one-color print |
| Outline | Menus and buttons, next to Lucide or Feather icons |
| Minimal | Favicon, browser tab and anywhere at 16 px |
| Colored | Presentations and the tool's own page |
At real sizes, from 16 to 48 px, the seal and the minimal version look like this:
What I learned
- Test at real sizes. An icon that looks great at 96 px can blur at 16. Always check 16, 24 and 48 px, in light and dark themes.
- Respect the set's padding. Lucide icons leave about 2 px free around them. My first map went to the edge: besides looking bigger than its neighbors, half of the stroke fell outside the frame.
- Vary the stroke on purpose. A 2 px outer outline with 1.5 px inner details works well, as long as the difference looks intentional.
-
Holes depend on drawing direction. To cut the globe out of the
filled diamond, the circle is drawn in the opposite direction to the diamond.
With SVG's default fill rule (
nonzero), that opens the hole without any extra attribute. - Be careful with national symbols. Brazil's Law 5,700/1971 regulates the flag and forbids altering it. The icon is a stylized reference to its shapes and colors, not the flag, which is why I left out the "Ordem e Progresso" banner. To register a design like this as a trademark, ask a specialist.
How to do the same in Icon Library
- Find the icon closest to your idea and click the pencil to open the editor.
- Use Icon on top to bring in a second icon, then adjust its size and position.
- Select the shapes that belong together and use Group. Show layers paints each shape in its own color.
- For a solid area, close the line with Join and use Fill.
- Use Copy SVG, or publish the icon so others can find it.
The code of the three versions
These are the SVGs I use today, for anyone who wants to see how they're built.
Seal
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.88 10.9L5.83 9.15L3.52 10.82L2.07 9.85L1.27 8.1L3.41 6.32L3.47 3.01L5.07 3.27L8.4 1.08L9.35 3.29L13.17 1.16L13.65 3.1L12.66 4.8L15.54 4.3L22.34 7.44L19.45 16.13L15.59 18.54L12.27 22.52L10.28 20.47L11.53 18.65L11.05 17.23" stroke-width="1.75"/><path d="M12.19 4.54L19.47 11.81L12.19 19.08L4.69 12ZM16.97 11.71a4.78 4.78 0 1 0-9.56 0a4.78 4.78 0 1 0 9.56 0Z" stroke-width="1.5" fill="currentColor"/><path d="M11.63 11.67A1.25 1.25 0 1 1 12.75 11.67L13.38 13.85H11Z" stroke-width="1" fill="currentColor"/></svg>Outline
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.88 10.9L5.83 9.15L3.52 10.82L2.07 9.85L1.27 8.1L3.41 6.32L3.47 3.01L5.07 3.27L8.4 1.08L9.35 3.29L13.17 1.16L13.65 3.1L12.66 4.8L15.54 4.3L22.34 7.44L19.45 16.13L15.59 18.54L12.27 22.52L10.28 20.47L11.53 18.65L11.05 17.23" stroke-width="1.75"/><path d="M12.19 4.54L19.47 11.81L12.19 19.08L4.69 12Z" stroke-width="1.5"/><path d="M11.49 11.88A1.55 1.55 0 1 1 12.89 11.88L13.66 14.6H10.72Z" stroke-width="1.5"/></svg>Minimal
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1.5L22.5 12L12 22.5L1.5 12ZM18.2 12a6.2 6.2 0 1 0-12.4 0a6.2 6.2 0 1 0 12.4 0Z" stroke-width="1.5" fill="currentColor"/><path d="M11.21 12.36A1.75 1.75 0 1 1 12.79 12.36L13.66 15.43H10.34Z" stroke-width="1" fill="currentColor"/></svg>