I build websites for roofers, HVAC companies and real estate agents. Every time, I hit the same wall: the icons I need do not exist in one consistent style.
So I built them. 650 editable SVG icons, 150 of them made for those three trades.
This is how I did it, what went wrong, and why the preview library is locked with real encryption instead of a fake password check.
Key takeaways
- One grid, one stroke weight and one corner style beats mixing icons from several packs.
- AI is fast at volume. Review is where the quality comes from: about 15 icons needed a redraw.
- A JavaScript password check can be bypassed from the inspect panel. Encrypting the data cannot.
- Saying the set is AI-assisted and human-reviewed is stronger than claiming hand-drawn work.
The Problem With Generic Icon Packs
Most icon libraries stop at a generic house and a wrench. When I design for a roofing company, I need shingles, flashing, hail damage and ridge vents. For HVAC, heat pumps, thermostats and ducts. For real estate, for-sale signs, lockboxes and floor plans.
The usual workaround is mixing icons from several packs. That gives you uneven stroke weights, mismatched corners and a site that looks assembled instead of designed.
How I Built 650 Icons Without Losing Consistency
I set the rules first, then reviewed everything against them.
- Define the system. One 24px grid, a 1.5 stroke, round caps and joins, and
currentColorso every icon inherits the text colour. - Pick the categories. Ten everyday UI sets plus Roofing, HVAC and Real Estate. 13 categories, 50 icons each.
- Build the icons. AI generated the SVG shapes from plain primitives (paths, circles, rectangles), so every icon stays easy to edit by hand.
- Review visually. I rendered all 650 icons onto contact sheets and checked each one at a glance.
- Redraw the weak ones. About 15 failed the check, including the PDF file, coins, cash register, screwdriver, hammer, thermostat and house key. They were redrawn and checked again.
- Package it. Individual SVG files, one sprite, a JSON manifest and a searchable preview page, zipped as one kit.
Why the Password Lock Uses Real Encryption
I wanted people to browse the full library before using it, without reading it from the browser’s inspect panel. A simple JavaScript password check does not do that, because the icon data would sit in the page source.
So the full set is compressed, then encrypted with AES-256-GCM, using a key derived from the password with PBKDF2 (600,000 rounds). The page contains only ciphertext plus a free sample of 26 icons. Without the password there is nothing readable to extract. I tested wrong and right passwords end to end.
The limit: anyone who has the password can copy and share the icons, and a lock cannot revoke one person. For selling, the zip download is the safer delivery. The locked page works as a preview.
What Went Wrong, and How I Fixed It
| Problem | Fix |
|---|---|
| Preview icons were invisible on a dark theme | Redesigned the preview with a dark panel and light icons |
| Weak or unclear icons in the first pass | Contact-sheet review, then about 15 icons redrawn |
| Blogger theme menu and footer competed with the library | Built an in-page version that keeps the theme header and footer |
| Password check could be bypassed from the inspect panel | Replaced it with AES-GCM encryption of the whole library |
| Password field stretched into a tall block on phones | Fixed the flex sizing and tested desktop, tablet and phone widths |
| Copy claimed the icons were drawn by hand | Rewrote it to say the set was built with AI assistance and curated by me |
A Note on AI
I built this set with AI assistance. I defined the style and categories, reviewed every icon, and redrew the ones that were not good enough. The AI did the volume. The judgment calls were mine.
Results So Far
The kit is built, reviewed and packaged. It ships with a searchable library page, seven product gallery images, a product description and a launch post.
I have no sales, download or engagement numbers yet, so I am not claiming any. When I have them, I will add them here.
Frequently Asked Questions
Which tools do the icons work in?
Figma, Illustrator, Inkscape, Elementor, Divi and plain HTML. They are clean SVG files.
Can I change the colour and stroke width?
Yes. The icons use currentColor, so CSS text colour recolours them. The stroke width is a single attribute.
Were the icons made with AI?
Yes, with AI assistance. I directed the style, reviewed all 650 and redrew the weak ones.
Why is the preview password protected?
So the full library cannot be read from the page source before someone has access. The free sample shows the style.
The Short Version
Generic icon packs do not cover trade websites. I built 650 consistent, editable SVG icons, including 150 for roofing, HVAC and real estate, then reviewed every one. The preview is locked with real encryption, and I am open about how it was made.
Need icons or a site built for a trade business?
If a pack cannot do it, I can. Book a call.