{"id":3711,"date":"2026-01-14T18:05:50","date_gmt":"2026-01-14T10:05:50","guid":{"rendered":"https:\/\/teen.aiproinstitute.com\/?p=3711"},"modified":"2026-01-14T18:42:47","modified_gmt":"2026-01-14T10:42:47","slug":"icon-set-generator-ui-app-icons","status":"publish","type":"post","link":"https:\/\/teen.aiproinstitute.com\/zh\/icon-set-generator-ui-app-icons\/","title":{"rendered":"Icon Set Generator (UI\/App Icons)"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"3711\" class=\"elementor elementor-3711\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-68864e5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"68864e5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e11bccb\" data-id=\"e11bccb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c525f8 elementor-widget elementor-widget-html\" data-id=\"1c525f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Icon Set Generator (UI\/App Icons) - AiPro Institute\u2122 Prompt Library<\/title>\n    <style>\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #ffffff; padding: 2rem; line-height: 1.6; }\n        .container { max-width: 900px; margin: 0 auto; }\n        .header { text-align: center; margin-bottom: 2rem; }\n        .header h1 { font-size: 2.5rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; margin-bottom: 0.5rem; }\n        .card { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }\n        .card-header { background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; padding: 2rem; }\n        .card-header h2 { font-size: 2rem; margin-bottom: 0.5rem; }\n        .card-header p { opacity: 0.95; font-size: 1.1rem; }\n        .meta-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }\n        .badge { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }\n        .badge-skill-intermediate { background: #f59e0b; color: white; }\n        .badge-time { background: #10b981; color: white; }\n        .badge-cost { background: #f59e0b; color: white; }\n        .badge-format { background: #8b5cf6; color: white; }\n        .tool-compatibility { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2); }\n        .tool-compatibility h3 { font-size: 0.9rem; margin-bottom: 0.5rem; opacity: 0.9; }\n        .tool-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }\n        .tool-badge { padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 15px; font-size: 0.8rem; }\n        .tool-badge.model-agnostic { background: rgba(255,255,255,0.3); font-weight: 600; }\n        .card-body { padding: 2rem; }\n        .section { margin-bottom: 2.5rem; }\n        .section-title { font-size: 1.5rem; color: #7c3aed; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }\n        .section-title::before { content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); border-radius: 2px; }\n        .prompt-box { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; font-family: 'Courier New', monospace; font-size: 0.95rem; line-height: 1.8; position: relative; margin-bottom: 1rem; }\n        .copy-button { position: absolute; top: 1rem; right: 1rem; background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; }\n        .copy-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }\n        .copy-button.copied { background: #10b981; }\n        .placeholder { color: #f97316; font-weight: 600; }\n        .logic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }\n        .logic-item { background: #f0f9ff; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #3b82f6; }\n        .logic-item h4 { color: #1e40af; margin-bottom: 0.5rem; font-size: 1.05rem; }\n        .logic-item p { color: #475569; font-size: 0.95rem; }\n        .output-preview { background: #fefce8; border: 2px solid #fde047; border-radius: 12px; padding: 1.5rem; }\n        .output-preview h4 { color: #854d0e; margin-bottom: 1rem; }\n        .chain-strategy { background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%); border-radius: 12px; padding: 1.5rem; }\n        .chain-steps { display: grid; gap: 1.5rem; margin-top: 1rem; }\n        .chain-step { background: white; padding: 1.25rem; border-radius: 10px; border-left: 4px solid #a855f7; }\n        .chain-step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }\n        .step-number { background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }\n        .chain-step h4 { color: #7c3aed; font-size: 1.1rem; }\n        .chain-step p { color: #475569; margin-bottom: 0.5rem; }\n        .hitl-tips { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; padding: 1.5rem; }\n        .tips-grid { display: grid; gap: 1rem; margin-top: 1rem; }\n        .tip-item { background: white; padding: 1rem; border-radius: 8px; border-left: 3px solid #10b981; }\n        .tip-item h4 { color: #047857; font-size: 1rem; margin-bottom: 0.5rem; }\n        .tip-item p { color: #475569; font-size: 0.9rem; }\n        .tip-item .follow-up { background: #f0fdf4; padding: 0.6rem; border-radius: 6px; margin-top: 0.5rem; font-size: 0.85rem; color: #166534; font-style: italic; }\n        .card-footer { background: #f8fafc; padding: 1.5rem 2rem; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; border-top: 1px solid #e2e8f0; }\n        .stat { display: flex; align-items: center; gap: 0.5rem; color: #475569; font-size: 0.95rem; }\n        .stat strong { color: #1e293b; }\n        .toast { position: fixed; bottom: 2rem; right: 2rem; background: #10b981; color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: none; align-items: center; gap: 0.5rem; animation: slideIn 0.3s ease; z-index: 1000; }\n        .toast.show { display: flex; }\n        @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n        @media (max-width: 768px) { body { padding: 1rem; } .header h1 { font-size: 2rem; } .card-header h2 { font-size: 1.5rem; } .logic-grid { grid-template-columns: 1fr; } .card-footer { flex-direction: column; gap: 1rem; } .copy-button { position: static; width: 100%; margin-top: 1rem; } .prompt-box { padding-top: 1.5rem; } }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1>AiPro Institute\u2122<\/h1>\n        <\/div>\n        <div class=\"card\">\n            <div class=\"card-header\">\n                <h2>Icon Set Generator (UI\/App Icons)<\/h2>\n                <p>Cohesive icon systems that enhance usability and strengthen visual identity across digital products<\/p>\n                <div class=\"meta-badges\">\n                    <span class=\"badge badge-skill-intermediate\">\u26a1 Intermediate<\/span>\n                    <span class=\"badge badge-time\">\u23f1\ufe0f 6-12 minutes<\/span>\n                    <span class=\"badge badge-cost\">\ud83d\udc8e Medium-High Cost<\/span>\n                    <span class=\"badge badge-format\">\ud83d\uddbc\ufe0f Icon Set (Multiple)<\/span>\n                <\/div>\n                <div class=\"tool-compatibility\">\n                    <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n                    <div class=\"tool-badges\">\n                        <span class=\"tool-badge\">Optimized for DALL-E 3<\/span>\n                        <span class=\"tool-badge\">Optimized for Midjourney v6<\/span>\n                        <span class=\"tool-badge\">Optimized for Leonardo.AI<\/span>\n                        <span class=\"tool-badge\">Optimized for Stable Diffusion XL<\/span>\n                        <span class=\"tool-badge model-agnostic\">\u2728 Icon Design Mode<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"card-body\">\n                <div class=\"section\">\n                    <h3 class=\"section-title\">\ud83d\udccb The Prompt<\/h3>\n                    <div class=\"prompt-box\">\n                        <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n                        <div id=\"promptContent\">Create a cohesive icon set for <span class=\"placeholder\">[App\/Website Name or Category]<\/span> with these specifications:\n\n**ICON SET FUNDAMENTALS:**\n\u2022 Application Type: <span class=\"placeholder\">[Mobile app\/Web dashboard\/SaaS product\/E-commerce\/Social platform]<\/span>\n\u2022 Icon Categories Needed: <span class=\"placeholder\">[Navigation\/Actions\/Status\/Social\/E-commerce\/Communication\/Media]<\/span>\n\u2022 Total Icon Count: <span class=\"placeholder\">[Number of icons required, e.g., 24, 50, 100]<\/span>\n\u2022 Icon Purpose: <span class=\"placeholder\">[Tab bar navigation\/Toolbar actions\/Feature illustrations\/Settings menu]<\/span>\n\u2022 Target Platform: <span class=\"placeholder\">[iOS\/Android\/Web\/Cross-platform]<\/span>\n\n**SPECIFIC ICON LIST:**\nRequired icons (list 8-12 core icons):\n1. <span class=\"placeholder\">[Home\/Dashboard]<\/span>\n2. <span class=\"placeholder\">[Search\/Discover]<\/span>\n3. <span class=\"placeholder\">[Profile\/Account]<\/span>\n4. <span class=\"placeholder\">[Settings\/Preferences]<\/span>\n5. <span class=\"placeholder\">[Notifications\/Alerts]<\/span>\n6. <span class=\"placeholder\">[Messages\/Chat]<\/span>\n7. <span class=\"placeholder\">[Cart\/Shopping]<\/span>\n8. <span class=\"placeholder\">[Favorites\/Likes]<\/span>\n9. <span class=\"placeholder\">[Share\/Send]<\/span>\n10. <span class=\"placeholder\">[Add\/Create]<\/span>\n11. <span class=\"placeholder\">[Delete\/Remove]<\/span>\n12. <span class=\"placeholder\">[More\/Menu]<\/span>\n\n**DESIGN STYLE & AESTHETIC:**\n\u2022 Visual Style: <span class=\"placeholder\">[Line\/Outline\/Filled\/Duotone\/3D\/Gradient\/Glyph\/Minimalist]<\/span>\n\u2022 Style Complexity: <span class=\"placeholder\">[Simple geometric\/Moderate detail\/Intricate illustration]<\/span>\n\u2022 Corner Radius: <span class=\"placeholder\">[Sharp 90\u00b0\/Slightly rounded 2px\/Fully rounded 4px+]<\/span>\n\u2022 Line Weight: <span class=\"placeholder\">[Thin 1.5px\/Medium 2px\/Bold 3px\/Variable]<\/span>\n\u2022 Fill Treatment: <span class=\"placeholder\">[No fill (outline only)\/Solid fill\/Gradient fill\/Duotone]<\/span>\n\u2022 Design Personality: <span class=\"placeholder\">[Professional corporate\/Friendly playful\/Modern tech\/Elegant minimal\/Bold expressive]<\/span>\n\n**TECHNICAL SPECIFICATIONS:**\n\u2022 Icon Grid Size: <span class=\"placeholder\">[24x24px\/32x32px\/48x48px\/64x64px base size]<\/span>\n\u2022 Optical Alignment: Icons centered with consistent visual weight, not just mathematical centering\n\u2022 Pixel Perfection: Align to pixel grid for crisp rendering at 1x resolution\n\u2022 Stroke Caps: <span class=\"placeholder\">[Round\/Square\/Butt]<\/span>\n\u2022 Stroke Joins: <span class=\"placeholder\">[Round\/Miter\/Bevel]<\/span>\n\u2022 Safe Area: Maintain <span class=\"placeholder\">[2px\/4px]<\/span> padding from icon grid edges\n\u2022 Export Sizes: <span class=\"placeholder\">[1x, 2x, 3x for mobile \/ 16px, 24px, 32px for web]<\/span>\n\n**COLOR & BRAND INTEGRATION:**\n\u2022 Primary Icon Color: <span class=\"placeholder\">[Hex code #XXXXXX for default state]<\/span>\n\u2022 Active\/Selected State: <span class=\"placeholder\">[Hex code #XXXXXX or gradient]<\/span>\n\u2022 Inactive\/Disabled State: <span class=\"placeholder\">[Hex code #XXXXXX - typically 40% opacity]<\/span>\n\u2022 Color Application: <span class=\"placeholder\">[Single color\/Accent color highlights\/Full color illustration]<\/span>\n\u2022 Dark Mode Version: <span class=\"placeholder\">[Yes - specify colors \/ No]<\/span>\n\u2022 Brand Alignment: Icons reflect <span class=\"placeholder\">[brand personality traits]<\/span>\n\n**CONSISTENCY FRAMEWORK:**\n\u2022 Metaphor Language: Use consistent visual metaphors across set (all \"add\" actions use + symbol)\n\u2022 Shape Family: <span class=\"placeholder\">[Circular base\/Square base\/Rounded square\/Mixed geometric]<\/span>\n\u2022 Detail Level: All icons maintain same complexity\u2014no overly simple mixed with overly complex\n\u2022 Orientation: <span class=\"placeholder\">[All front-facing\/Consistent 45\u00b0 angle\/Mixed perspectives]<\/span>\n\u2022 Negative Space: Consistent breathing room within icon boundaries\n\u2022 Style DNA: Every icon should be recognizable as part of the same family at a glance\n\n**ACCESSIBILITY & USABILITY:**\n\u2022 Clarity at Small Sizes: Icons must be recognizable at <span class=\"placeholder\">[16px minimum size]<\/span>\n\u2022 International Recognition: Use universal symbols, avoid culture-specific metaphors\n\u2022 Differentiation: Each icon clearly distinct from others (no ambiguous overlaps)\n\u2022 Touch Target: Design assumes <span class=\"placeholder\">[44x44px iOS\/48x48px Android]<\/span> minimum tap area\n\u2022 Semantic Accuracy: Icons accurately represent their function without text labels\n\n**ICON STATES & VARIATIONS:**\n\u2022 Default State: Base unselected appearance\n\u2022 Active\/Selected: <span class=\"placeholder\">[Filled version\/Color change\/Outline to fill\/Add indicator dot]<\/span>\n\u2022 Hover State (web): <span class=\"placeholder\">[Subtle scale\/Color shift\/Add background circle]<\/span>\n\u2022 Disabled State: <span class=\"placeholder\">[Reduced opacity 40%\/Grayed out]<\/span>\n\u2022 Badge Variant: <span class=\"placeholder\">[Include notification dot\/count bubble options]<\/span>\n\n**ICONOGRAPHY PRINCIPLES:**\n\u2022 Recognition Speed: Users should identify icon meaning in under 0.5 seconds\n\u2022 Metaphor Clarity: Use familiar real-world objects for abstract concepts (trash can = delete, magnifying glass = search)\n\u2022 Simplification Balance: Remove unnecessary details while keeping icon recognizable\n\u2022 Positive\/Negative Space: Strategic use of cutouts and solid forms for visual interest\n\u2022 Directional Consistency: Arrows, pointers, and motion indicators follow same direction logic\n\n**TECHNICAL DELIVERABLES:**\n\u2022 File Format: <span class=\"placeholder\">[SVG vector\/PNG raster\/Icon font\/Both]<\/span>\n\u2022 Organization: <span class=\"placeholder\">[Artboard grid layout\/Individual files\/Icon library]<\/span>\n\u2022 Naming Convention: <span class=\"placeholder\">[icon-name-size-state.svg \/ ic_name_24dp.png]<\/span>\n\u2022 Documentation: Icon name, purpose, size specs, usage guidelines\n\u2022 Design System Integration: Icons packaged for <span class=\"placeholder\">[Figma\/Sketch\/Adobe XD]<\/span>\n\n**PRESENTATION FORMAT:**\n\u2022 Grid Layout: Display all icons in organized grid showing consistency\n\u2022 Background: <span class=\"placeholder\">[White\/Gray\/Dark\/Transparent with colored backgrounds]<\/span>\n\u2022 Spacing: Equal padding between icons for visual evaluation\n\u2022 Labeling: <span class=\"placeholder\">[Show icon names below each\/No labels\/Grouped by category]<\/span>\n\u2022 Context Mockup: <span class=\"placeholder\">[Show icons in UI context (navigation bar, toolbar)\/Grid only]<\/span>\n\nGenerate a professional, cohesive icon set with perfect consistency, optimal usability, and brand-aligned visual style that enhances user experience and strengthens product identity across all touchpoints.<\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"section\">\n                    <h3 class=\"section-title\">\ud83e\udde0 Why This Prompt Works<\/h3>\n                    <div class=\"logic-grid\">\n                        <div class=\"logic-item\">\n                            <h4>Consistency-First Architecture<\/h4>\n                            <p>Defines shared visual DNA (line weight, corner radius, shape family) before individual icons, ensuring cohesive family resemblance across entire set.<\/p>\n                        <\/div>\n                        <div class=\"logic-item\">\n                            <h4>Technical Precision Standards<\/h4>\n                            <p>Pixel grid alignment, optical centering, and stroke specifications prevent common AI icon failures (blurry edges, misaligned elements, inconsistent weight).<\/p>\n                        <\/div>\n                        <div class=\"logic-item\">\n                            <h4>Semantic Clarity Framework<\/h4>\n                            <p>Prioritizes recognition speed and metaphor universality, ensuring icons communicate function instantly without requiring text labels.<\/p>\n                        <\/div>\n                        <div class=\"logic-item\">\n                            <h4>Multi-State System Design<\/h4>\n                            <p>Specifies default, active, hover, and disabled states upfront, creating complete design system rather than single-state illustrations.<\/p>\n                        <\/div>\n                        <div class=\"logic-item\">\n                            <h4>Platform-Aware Specifications<\/h4>\n                            <p>Different requirements for iOS, Android, and web (touch targets, rendering sizes) ensure icons function correctly in intended environment.<\/p>\n                        <\/div>\n                        <div class=\"logic-item\">\n                            <h4>Scalability & Extensibility<\/h4>\n                            <p>Style documentation and clear rules enable future icon additions that seamlessly integrate with existing set, preventing visual inconsistency over time.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"section\">\n                    <h3 class=\"section-title\">\u2728 Output Preview<\/h3>\n                    <div class=\"output-preview\">\n                        <h4>Example: Fitness App Icon Set<\/h4>\n                        <p><strong>Application:<\/strong> \"FitFlow\" \u2014 Personal fitness tracking mobile app (iOS + Android)<\/p>\n                        <p><strong>Icon Count:<\/strong> 24 core navigation and action icons<\/p>\n                        <p style=\"margin-top: 1rem;\"><strong>Design Style:<\/strong> Line\/outline icons with rounded corners, medium detail complexity, friendly modern aesthetic<\/p>\n                        <p style=\"margin-top: 1rem;\"><strong>Technical Specs:<\/strong> 24x24px base artboard, 2px consistent stroke, 3px corner radius, round stroke caps\/joins, 3px safe area padding<\/p>\n                        <p style=\"margin-top: 1rem;\"><strong>Color System:<\/strong> Default #6b7280 (neutral gray), Active #7c3aed (vibrant purple), Inactive 40% opacity, Dark mode #e5e7eb<\/p>\n                        <p style=\"margin-top: 1rem;\"><strong>Core Icon Set:<\/strong> Home, Workouts, Progress, Nutrition, Profile, Timer, Heart Rate, Calendar, Settings, Achievements, Community, More<\/p>\n                        <p style=\"margin-top: 0.5rem; font-style: italic; color: #6b7280;\">[Deliverables: SVG source files, PNG exports at 1x\/2x\/3x, Figma component library, usage guidelines PDF, dark mode variants]<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"section\">\n                    <h3 class=\"section-title\">\ud83d\udd17 Prompt Chain Strategy<\/h3>\n                    <div class=\"chain-strategy\">\n                        <div class=\"chain-steps\">\n                            <div class=\"chain-step\">\n                                <div class=\"chain-step-header\">\n                                    <div class=\"step-number\">1<\/div>\n                                    <h4>Icon Inventory & Style Definition<\/h4>\n                                <\/div>\n                                <p>List all required icons by category \u2192 Define brand personality and visual style \u2192 Establish technical specs (grid, stroke, corners) \u2192 Select style references and inspiration<\/p>\n                            <\/div>\n                            <div class=\"chain-step\">\n                                <div class=\"chain-step-header\">\n                                    <div class=\"step-number\">2<\/div>\n                                    <h4>Generate Core Icon Set<\/h4>\n                                <\/div>\n                                <p>Use complete prompt to create initial 12-24 icons \u2192 Request grid layout presentation \u2192 Verify consistency (stroke weight, corner radius, complexity) \u2192 Check clarity at small sizes<\/p>\n                            <\/div>\n                            <div class=\"chain-step\">\n                                <div class=\"chain-step-header\">\n                                    <div class=\"step-number\">3<\/div>\n                                    <h4>Expand & Contextualize<\/h4>\n                                <\/div>\n                                <p>Generate additional icons matching established style \u2192 Create state variations (active, hover, disabled) \u2192 Produce dark mode versions \u2192 Show icons in UI context \u2192 Package as design system<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"section\">\n                    <h3 class=\"section-title\">\ud83d\udca1 Human-in-the-Loop Tips<\/h3>\n                    <div class=\"hitl-tips\">\n                        <div class=\"tips-grid\">\n                            <div class=\"tip-item\">\n                                <h4>\ud83c\udfaf Squint Test for Consistency<\/h4>\n                                <p>Zoom out and squint at full icon set. If some icons appear heavier\/lighter or different style, they fail consistency test. Request corrections to match visual weight.<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Adjust icon to match visual weight of other icons\u2014appears too heavy\/light\"<\/div>\n                            <\/div>\n                            <div class=\"tip-item\">\n                                <h4>\ud83c\udfa8 Small-Size Legibility Test<\/h4>\n                                <p>Scale icons to 16px (smallest functional size). Details that disappear or muddy are problems. Simplify overly complex icons to maintain clarity at all sizes.<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Simplify icon details\u2014too complex at 16px size, elements merge together\"<\/div>\n                            <\/div>\n                            <div class=\"tip-item\">\n                                <h4>\ud83d\udcd0 Optical vs. Mathematical Centering<\/h4>\n                                <p>AI often centers icons mathematically, creating visual imbalance. Request optical alignment: triangles need vertical offset, circles feel centered when slightly high.<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Adjust optical centering\u2014icon appears too low despite mathematical center\"<\/div>\n                            <\/div>\n                            <div class=\"tip-item\">\n                                <h4>\ud83d\udd04 Metaphor Ambiguity Check<\/h4>\n                                <p>Show icons to 3-5 people without labels. If they can't identify meaning, metaphor fails. Replace with more universal symbols (avoid overly abstract concepts).<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Redesign icon with clearer metaphor\u2014current design too abstract\/ambiguous\"<\/div>\n                            <\/div>\n                            <div class=\"tip-item\">\n                                <h4>\ud83c\udfad State Transition Smoothness<\/h4>\n                                <p>Active states should feel like natural progressions, not jarring changes. Outline-to-fill transitions work best. Avoid changing icon metaphor between states.<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Create active state by filling outline, maintain same icon structure for smooth transition\"<\/div>\n                            <\/div>\n                            <div class=\"tip-item\">\n                                <h4>\ud83d\udccb Future-Proof Style Documentation<\/h4>\n                                <p>Extract style rules: exact stroke weights, corner radii, shape family, complexity guidelines. Document these for future icon additions to maintain consistency.<\/p>\n                                <div class=\"follow-up\">\u2192 Follow-up: \"Document style DNA: 2px stroke, 3px corners, circular base shapes, medium complexity\"<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"card-footer\">\n                <div class=\"stat\"><span>\u2b50 <strong>4.9<\/strong> (342 ratings)<\/span><\/div>\n                <div class=\"stat\"><span>\ud83d\udccb <strong>5,127<\/strong> copies made<\/span><\/div>\n                <div class=\"stat\"><span>\ud83d\udcac <strong>219<\/strong> user reviews<\/span><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"toast\" id=\"toast\"><span>\u2705 Prompt copied to clipboard!<\/span><\/div>\n    <script>\n        function copyPrompt() {\n            const promptText = document.getElementById('promptContent').innerText;\n            navigator.clipboard.writeText(promptText).then(() => {\n                const button = document.querySelector('.copy-button');\n                const toast = document.getElementById('toast');\n                button.classList.add('copied');\n                button.textContent = '\u2705 Copied!';\n                toast.classList.add('show');\n                setTimeout(() => {\n                    button.classList.remove('copied');\n                    button.textContent = '\ud83d\udccb Copy Prompt';\n                    toast.classList.remove('show');\n                }, 2000);\n            });\n        }\n    <\/script>\n<\/body>\n<\/html>\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Icon Set Generator (UI\/App Icons) &#8211; AiPro Institute\u2122 Prompt Library AiPro Institute\u2122 Icon Set Generator (UI\/App Icons) Cohesive icon systems that enhance usability and strengthen visual identity across digital products \u26a1 Intermediate \u23f1\ufe0f 6-12 minutes \ud83d\udc8e Medium-High Cost \ud83d\uddbc\ufe0f Icon Set (Multiple) \ud83d\udee0\ufe0f Tool Compatibility Optimized for DALL-E 3 Optimized for Midjourney v6 Optimized for&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[110,96],"tags":[],"class_list":["post-3711","post","type-post","status-publish","format-standard","hentry","category-marketing-visuals","category-visual-creation"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=3711"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3711\/revisions"}],"predecessor-version":[{"id":3798,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/3711\/revisions\/3798"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=3711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=3711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=3711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}