Zo maak je snel een fatsoenlijk icoon voor een side project zonder Figma en een designer

Herkenbaar? Je hebt net je MVP gepolijst, tests geschreven, de build ingesteld, en dan heeft het project een icoon nodig. Figma openen voor een eenvoudig badge'tje met een gradient en glyph voelt als te veel moeite. Blind in code tekenen of zoeken naar obscure online converters vol met advertenties is ook niet bepaald aantrekkelijk.

Onlangs stuitte ik op de AppIcon Forge repository. Het is een lichtgewicht open-source webtool die specifiek is gebouwd voor momenten als deze. Het neemt al het vervelende werk uit handen van het indelen van vierkante en afgeronde iconen voor mobiele en desktoptoepassingen.

Wat de generator kan doen

Het kernidee is simpel: geef developers een overzichtelijke interface met sliders en direct preview, zonder de overhead van vector grafische tools.

Hier zijn een paar voorbeelden van wat je in een paar klikken kunt samenstellen:

De functies in meer detail bekeken, de service dekt alle basisbehoeften:

• Iconify catalogus integratie. De interface bevat zoeken binnen een enorme database van vector iconen met meer dan 200.000 symbolen. Typ een trefwoord in, kies een glyph, en bekijk het direct op een achtergrond.
• Tekst en typografie ondersteuning. Je kunt een logo maken van één of twee letters, het lettertype aanpassen, letter-spacing instellen, en gradients toepassen op de tekst.
• Upload je eigen assets. Als standaard iconen niet passen, kun je een lokaal SVG of rasterafbeelding uploaden.
• Achtergrond stijl aanpassing. Ondersteunt lineaire en radiale gradients, slagschaduwen met blur, randbreedte en kleur, en hoekafonding.

Overigens heeft de auteur van het project een nuttige waarschuwing achtergelaten in de README over lettertypen. Als je een op tekst gebaseerd icoon genereert, kan de app standaard je OS systeemlettertypen gebruiken. Voor commerciële releases is het beter om over te schakelen naar open Google Fonts om licentieproblemen te voorkomen.

Hoe het project te draaien

De eenvoudigste optie is om de kant-en-klare versie op GitHub Pages te openen en direct te beginnen met het bouwen van je asset. Geen installatie nodig.

Als je liever dit soort utilities lokaal houdt of een kopie wilt deployen binnen een gesloten netwerk, dan draait het project met slechts een paar commando's.

Draaien met pnpm

Voor lokale TypeScript en Vite ontwikkeling:

# Клонируем репозиторий
git clone https://github.com/zhangyu1818/appicon-forge.git

# Переходим в папку проекта
cd appicon-forge

# Ставим зависимости
pnpm install

# Запускаем локальный dev-сервер
pnpm dev

Daarna is de interface beschikbaar in je browser op http://localhost:5173/appicon-forge/.

Draaien in Docker

Als je geen zin hebt in Node.js en package managers, er is een kant-en-klare Dockerfile:

git clone https://github.com/zhangyu1818/appicon-forge.git
cd appicon-forge

# Собираем и запускаем контейнер
docker build -t appicon-forge .
docker run -d --name=appicon-forge --restart=always -p 5173:80 appicon-forge

Of via Docker Compose, als je al home service infrastructuur hebt ingesteld:

docker-compose up -d

Voor welke taken het handig is

Natuurlijk vervangt deze tool het werk van een grafisch ontwerper niet voor complex branding. Maar voor alledaagse ontwikkelaarstaken is het meer dan genoeg:

• Snelle prototypes en side projects die een net placeholder icoon nodig hebben in plaats van een standaard wit vierkant.
• Interne bedrijfsutilities en admin panels waar launch snelheid belangrijker is dan een unieke stijl.
• Favicons maken voor websites of iconen voor PWA manifests.
• Browser extensions stylen.

Het project wordt gedistribueerd onder de permissieve MIT licentie. De codebase is clean en compact, dus als je wilt, kun je de repository forken en je eigen grid templates of specifieke export formats voor iOS en Android toevoegen.