Whan-Yen Icon Set — 200+ Vector Icons for Web & Mobile

Whan-Yen Icon Set — 200+ Vector Icons for Web & MobileThe Whan-Yen Icon Set is a thoughtfully crafted collection of more than 200 vector icons designed to streamline UI design for web and mobile projects. It blends clean geometry, consistent visual language, and practical file formats so designers and developers can move faster, maintain visual harmony, and scale interfaces without pixel distortion.

Design principles and visual language

The Whan-Yen set follows a minimal, modern aesthetic that fits a wide range of product styles from productivity tools to consumer apps. Key design principles:

• Consistency: Icons share uniform stroke weights, corner radii, and visual balance so they read as a single cohesive family across screens.
• Simplicity: Shapes are pared down to clear, recognizable silhouettes that maintain legibility at small sizes.
• Flexibility: The set includes both outline (stroke) and solid (filled) styles to support different visual hierarchies and themes.
• Scalability: As vector assets, icons scale without loss of quality and can be exported at any resolution required.

What’s included

The Whan-Yen Icon Set package typically contains:

• 200+ vector icons covering common UI patterns: navigation, media controls, actions, social, e-commerce, file & document states, communication, maps & location, system & settings, notifications, and more.
• Multiple styles — at least stroke (outline) and solid (filled) variants for core icons.
• File formats — SVG as the primary vector format, plus PDF, AI (Adobe Illustrator), and PNG exports for raster needs.
• Design source files — Figma and/or Sketch files with organized components and auto-layout where applicable.
• Icon font (optional) — a packaged webfont (WOFF/WOFF2) for projects that prefer font-based icon use.
• Documentation — usage guide, spacing and alignment recommendations, and naming conventions for developers.

Where Whan-Yen fits in a product workflow

Designers and teams can slot Whan-Yen into multiple stages of a product workflow:

• Rapid prototyping: drag-and-drop Figma components let you prototype UI flows with consistent iconography.
• Design systems: import icons as components or tokens into a design system to enforce visual consistency.
• Development handoff: SVGs and organized naming conventions reduce ambiguity and speed up implementation.
• Theming: outline and filled variants enable light/dark theme adaptations without redesigning assets.

Example use cases:

• Dashboard app: clear data-action icons (filters, export, refresh).
• Ecommerce site: cart, wishlist, payment methods, product states.
• Messaging app: attachments, read receipts, reactions, voice notes.

Accessibility & technical considerations

Good icon sets consider accessibility and implementation details:

• Use semantic markup: when embedding SVGs inline, include aria-hidden or appropriate aria-labels so assistive tech can ignore decorative icons or announce meaningful ones.
• Sizing and touch targets: icons should maintain legibility at common UI sizes (16–24px for small UI, 32–48px for prominent actions) and be placed within adequate touch targets (at least 44px square) on mobile.
• Color and contrast: for icons conveying critical information (errors, status), ensure color contrast meets accessibility guidelines or pair color with other visual cues.
• Sprite vs inline SVG vs font: choose format based on needs — inline SVGs enable styling and accessibility, icon fonts are compact but have limitations with multicolor and accessibility.

Customization and extension

Whan-Yen is intended to be adaptable:

• Stroke weight and corner radius can be adjusted in vector editors to match a product’s visual language.
• You can build additional icons using the same grid and spacing rules to expand the set while preserving cohesion.
• For branded apps, recolor, add subtle duotone fills, or combine base glyphs to create custom symbols.

Practical tips:

• Keep a 24px (or chosen) grid and consistent padding when creating new glyphs.
• Use boolean operations and limited anchor points to keep SVGs lightweight.
• Maintain a shared source file with component variants for team-wide updates.

Performance and optimization

For production use, optimize icons to reduce load and improve rendering:

• Minify SVGs and remove unnecessary metadata and editor-specific attributes. Tools like SVGO automate this.
• Combine small, decorative icons into sprites or inline the most-used icons to cut network requests.
• Use modern formats (WOFF2 for icon fonts) and leverage CDNs for wide distribution.

Licensing and distribution

Before using any icon set, confirm licensing terms. Common license types:

• Free for personal and commercial use (with or without attribution).
• Pay-once or subscription models for premium sets.
• Extended licenses for embedding in products or resale.

Whan-Yen’s exact license should be checked in the product documentation; ensure it permits the intended commercial or redistribution usage.

Conclusion

The Whan-Yen Icon Set — 200+ Vector Icons for Web & Mobile — offers a comprehensive, cohesive icon family intended to speed up UI design and implementation while remaining flexible for theming and customization. Its vector-first approach ensures crisp rendering across platforms, and a range of included formats and styles supports modern design workflows from prototyping to production.

If you want, I can: provide a brief usage guide for Figma, generate a component naming convention for your design system, or create 10 additional custom icons in the Whan-Yen style. Which would you like?