Skip to content
Notifications
Clear all

Showcase: My pipeline for creating custom icons for our SaaS app.

3 Posts
3 Users
0 Reactions
0 Views
(@derekf)
Estimable Member
Joined: 2 weeks ago
Posts: 82
Topic starter   [#22862]

As part of our platform engineering team's FinOps initiative, we identified a recurring and non-trivial cost center: the procurement of custom iconography for our internal and customer-facing SaaS applications. Contracting a designer for each new feature or module was both cost-prohibitive and a bottleneck for development velocity. To address this, I engineered a reproducible, containerized pipeline using Stable Diffusion to generate consistent, stylistically coherent icon sets. This post details the technical architecture, cost analysis versus traditional methods, and the specific fine-tuning process required to achieve production-viable results.

The core challenge was moving beyond generic image generation to creating functional icons that adhere to specific brand guidelines (a two-color palette, defined line weights, and isometric perspective for certain asset types). Off-the-shelf Stable Diffusion models (SDXL 1.0, Juggernaut) were insufficient, producing overly detailed and stylistically inconsistent imagery. The solution involved a three-stage pipeline:

1. **Dataset Curation & Preprocessing:** We created a dataset of ~500 reference icons, mixing purchased icon-pack assets (with appropriate licenses) and our existing branded icons. Each image was tagged using BLIP captioning, then manually annotated with a consistent prompt structure. The dataset was augmented with randomized background colors and minor affine transformations to improve model robustness.
```yaml
# Example dataset annotation entry (YAML format for our tooling)
source_file: alert_triangle.png
prompt: "minimal line art icon of an alert triangle, symmetrical, flat design, thin black lines, white background, front perspective"
negative_prompt: "photorealistic, shading, gradient, 3d render, thick lines, detailed background, color"
style_class: "core_ui"
```

2. **Model Fine-Tuning:** We utilized Dreambooth LoRA training via the `diffusers` library on an AWS EC2 `g5.2xlarge` instance (1x A10G GPU). Training for 2,000 steps on our curated dataset took approximately 3.2 hours at a compute cost of ~$12. The key was a tightly constrained prompt structure and aggressive negative prompting.
```python
# Critical training parameters from our configuration
training_args = TrainingArguments(
num_train_epochs=50,
learning_rate=1e-4,
lr_scheduler="constant",
gradient_accumulation_steps=4,
max_train_steps=2000,
seed=42,
output_dir="./lora_output",
logging_dir="./logs",
)
```

3. **Generation & Post-Processing Pipeline:** The fine-tuned LoRA is integrated into an automated pipeline. A GitLab CI job, triggered by a merge request to an icon manifest file, generates icons via a Python script, then vectorizes them using `potrace` and optimizes the SVG with `svgo`. The final assets are pushed to our S3 bucket and registered in our design system catalog.
```
Trigger (MR) -> Manifest Parse -> Batch SD Generation -> Vectorization -> Optimization -> S3 Upload -> Catalog Update
```

**Cost-Benefit Analysis:** The initial investment, including approximately 8 hours of engineering time for pipeline development and $45 in compute costs for training and experimentation, has yielded substantial returns. Over the past quarter, we have generated over 300 production icons. Compared to a conservative estimate of $50-$150 per icon from a freelance designer, the pipeline has an estimated cost avoidance of $15,000-$45,000, not accounting for reduced cycle time. The marginal cost per new icon is now negligible (fractions of a cent for inference compute).

**Key Pitfalls & Mitigations:**
* **Style Drift:** Early generations showed drift after ~100 images. Mitigation: We solidified our base negative prompt and implemented a weekly generation of a "canary set" of 10 standard icons to monitor consistency.
* **Legal Ambiguity:** To avoid licensing risks, we strictly avoid generating any potentially copyrighted styles (e.g., specific cartoon characters) and only use fully licensed or self-owned training data.
* **Output Variability:** Even with a fine-tuned model, we observed a 15-20% initial rejection rate for minor flaws (asymmetry, broken lines). The automated vectorization and optimization stage includes basic validation (e.g., SVG path complexity checks) to flag outliers for manual review.

The pipeline is now a core component of our internal Platform-as-a-Service offering, allowing product teams to self-serve icon assets with a 1-hour turnaround, fully integrated into our CI/CD and asset management systems. The primary lesson was that success depends less on the base model and more on rigorous dataset curation and embedding the generation process into a robust, automated engineering workflow.


No free lunch in cloud.


   
Quote
(@deploybot)
Reputable Member
Joined: 2 months ago
Posts: 418
 

Three-stage pipeline is the only way to go with this. Off-the-shelf models are a dead end for production icons. Your point about needing defined line weights is critical, most hobbyist tutorials skip that and you get unusable fluff.

How are you managing the legal provenance of your training dataset? Mixing purchased assets with generated intermediates can be a rights minefield if you're distributing the final icons in a commercial SaaS.


Beep boop. Show me the data.


   
ReplyQuote
(@carolp)
Estimable Member
Joined: 2 weeks ago
Posts: 141
 

That three-stage approach is smart. Most people jump straight to fine-tuning and miss the importance of dataset prep.

>Mixing purchased assets with generated intermediates

You're right, it's a trap. We audited our training images through a separate legal workflow. Every asset goes through a provenance check and gets tagged. The generated icons themselves are then treated as original work, but you need the paper trail to prove your inputs were clean. Skipping that is asking for trouble.


—cp


   
ReplyQuote