Whan-Yen Icon Set — Pixel-Perfect Icons for Designers and Developers
Designers and developers need icons that are consistent, scalable, and easy to integrate. The Whan-Yen Icon Set delivers on all three, offering a thoughtfully crafted collection of pixel-perfect icons built for modern interfaces. Whether you’re prototyping a mobile app, polishing a dashboard, or shipping a marketing site, Whan-Yen aims to speed up your workflow while maintaining visual clarity.
What’s included
- A curated library of 200+ icons covering common UI needs: navigation, actions, communication, commerce, media, and system states.
- Multiple formats: SVG, PNG (1x/2x/3x), and icon fonts for broad compatibility.
- Two visual weights: Regular (outline) and Filled, ensuring flexibility across different UI contexts.
- Source files in Figma and Sketch for designers to customize spacing, stroke, and size.
- An organized folder structure and an easy-to-read naming convention for quick lookup.
Pixel-perfect precision
Each icon in Whan-Yen is designed on a pixel grid to ensure crisp rendering at standard sizes (16–48 px). Designers who care about alignment will appreciate:
- Consistent baseline, cap-height, and optical centering across the set.
- Harmonized stroke widths and corner radii so icons align visually when placed together.
- Hinting and optimized SVG paths that avoid unnecessary nodes and keep file sizes small.
Developer-friendly features
Integration is straightforward:
- Ready-to-use SVGs with clean IDs and no extraneous metadata.
- An icon font build with accessibility-friendly class names and ligatures.
- A lightweight JS utility for on-the-fly SVG injection and theming (color, size, stroke).
- Clear usage examples for React, Vue, and plain HTML/CSS to reduce onboarding time.
- Tree-shakeable packages so you only ship the icons you use.
Customization & theming
Whan-Yen supports brand alignment:
- Easily switch between outline and filled weights to match UI tone.
- Variable stroke system lets teams adapt stroke widths globally for cohesive scale.
- Color tokens and CSS variables included for dynamic theming (dark mode, brand palettes).
- Layered SVGs where applicable to enable simple two-tone or duotone treatments.
Accessibility & performance
The set considers both users and performance:
- Semantic markup and ARIA examples for icon-only buttons and decorative icons.
- Optimized SVGs and responsive PNG exports to keep bundle sizes minimal.
- Guidance on fallback icons and progressive enhancement for older browsers.
Workflow benefits
- Faster prototypes: drag-and-drop Figma components make iterating quick.
- Developer handoff: predictable naming and examples reduce back-and-forth.
- Design system ready: consistent metrics and tokens let icons slot into existing systems effortlessly.
Use cases
- Product dashboards where clarity at small sizes is crucial.
- Mobile apps needing compact, readable iconography.
- Marketing pages that require consistent visual language across sections.
- Design systems and component libraries seeking a reliable, extensible icon foundation.
Getting started
- Download the package and import your preferred format (SVGs for web, PNGs for legacy, or the icon font for quick prototyping).
- Drop Figma components into your design files and swap weights as needed.
- Use the provided JS utility for runtime theming or import individual SVGs in components for tree-shaking.
- Follow the accessibility guide to add appropriate aria-hidden or aria-label attributes.
Conclusion
Whan-Yen Icon Set balances aesthetic polish with practical engineering. Its pixel-perfect construction, multi-format support, and developer-friendly tooling make it a strong choice for teams building modern, accessible interfaces. Whether you’re designing