Project Overview
SF Symbol Finder
Problem
Challenge: Frontend developer couldn't identify SF Symbol names from designs
Impact: Slowed development when translating designs to code.
The Play Prototype Crisis
In March 2026, our startup's prototyping platform (Play) announced a major pivot:
- Before: Swift prototype builder
- After: AI prototyping tool
- Timeline: Platform shutdown in April 2026
What We Lost
When Play shut down, we were left with:
❌ Opaque layout system - no native SwiftUI code
❌ Hard-to-edit UI - wrapper SDK instead of real layouts
❌ No design tokens - everything locked in their system
What's this icon called in SF Symbols?
The Bigger Problem
Our overseas development team was already moving slowly. Now they faced a new blocker:
"What's this icon called in SF Symbols?"
Some symbol names are intuitive (house, heart), but others are cryptic (gearshape.2.fill, arrow.triangle.2.circlepath).
Solution
SF Symbols Finder: Built a tool that identifies SF Symbol names from screenshots
Key Features
- Screenshot capture: grab any design or interface
- Smart detection: computer vision identifies icons
- Symbol names list: exact SF Symbol identifiers
- Multiple exports: SVG, PNG formats
How It Works
- Take screenshot of design
- AI analyzes and detects SF Symbol icons
- Outputs exact symbol names for developers
- Export assets for immediate use or copy the list to paste into your project tracking system.
Impact
- Faster development: no more guessing icon names
- Reduced back-and-forth: designers and developers aligned
- Better handoffs: complete symbol documentation
- Team velocity: overseas team could work independently
Outcome
Turned a frustrating platform migration into an opportunity to build better design-to-development workflows.
This tool bridges the gap between visual design and technical implementation - exactly what teams need when dealing with Apple's 7,000+ SF Symbols.
© 2023 Danita Delce. All rights reserved.
