IT Doodle
Icons
12 IT professional characters drawn in doodle style — entirely generated with AI prompts. Each icon is ready to use: click to copy SVG or CSS. First theme in an ongoing series.
01 — What it is
12 IT characters, ready to drop in.
An AI-generated icon set for IT roles — from Frontend Dev to AI Engineer and Security Expert. Each character is drawn in a doodle style that reflects the personality of the role.
Click any icon on the live page to copy its SVG code or CSS. No install, no dependencies — just paste directly into your project.
02 — How it was made
Prompt → SVG, from scratch.
Started by defining a visual style direction, then prompted Claude to generate SVG code for each IT role with its own character traits. A system prompt was designed first to maintain style consistency, then each character was generated and refined iteratively.
The process itself is an experiment in how far AI can go with design asset creation. One theme for now — more to come.
03 — Try it
Copy and use directly from the live page.
Click any icon to copy its SVG or CSS. Free to use.
04 — The Prompt
Build your own — use this prompt.
This is the full prompt used to generate the icon set. Paste it into Claude, ChatGPT, or any capable AI and adapt the character list, style, or layout to your own needs.
Build a React + Vite IT professional doodle icon showcase website.
## Project Setup
- Initialize with: npm create vite@latest . -- --template react
- Files to create: src/data/icons.jsx, src/App.jsx, src/App.css
## Icon Design Spec
- Theme: 12 IT professional characters as doodle illustrations
- Characters: Frontend Dev, Backend Dev, UI/UX Designer, Data Scientist,
AI Engineer, DevOps, Security Expert, Product Manager, QA Tester,
Game Dev, Mobile App Dev, Fullstack Dev
- Style: Naive doodle — hand-drawn feel, organic curved lines,
imperfect shapes, charming and expressive
- Use MORE curves! Prefer Q and C bezier path commands over straight lines
- Color: Black (#000000) and White (#FFFFFF) ONLY — no other colors
- Some areas filled solid black (hair, hats, accessories) for visual contrast
- SVG spec: viewBox="0 0 100 100", stroke="#000000", stroke-width="1.2",
fill="none" as default
- Each icon: simple face in upper half + profession-specific
tool/symbol in lower half
## CSS Animation
@keyframes doodle-wiggle {
0% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
100% { transform: rotate(-2deg); }
}
Trigger on hover.
## UI Layout
- 4-column responsive grid
- White background, no card borders
- Click icon → modal with SVG tab + CSS tab + Copy button
- Clean, minimal typography — black text only