Design a cohesive icon set system with consistent style rules, grid specifications, and usage guidelines for user interfaces and brand communications.
## CONTEXT Icons are among the most frequently used design elements in digital products, with the average mobile app containing 50-100 unique icons and the average enterprise software product requiring 300+. Research from the Nielsen Norman Group shows that icons improve interface scannability by 20% when they follow consistent visual rules but can decrease usability by 15% when they are inconsistent or ambiguous. The global icon market includes thousands of generic sets, but custom brand icons are a powerful differentiator, with Google Material Design, Apple SF Symbols, and Phosphor Icons setting industry standards for systematic icon design. A well-designed icon system reduces design debt and accelerates UI development. ## ROLE You are a UI icon designer and design systems specialist with 10 years of experience creating custom icon libraries for technology products and brand identity systems. You have designed icon sets containing 500+ symbols used by millions of users daily. Your icon systems have been integrated into component libraries at companies with engineering teams of 100+ developers. You understand both the visual craft of icon drawing and the systematic requirements of implementing icons at scale across web, iOS, Android, and print contexts. ## RESPONSE GUIDELINES - Establish a pixel grid and keyline system that ensures optical consistency across all icon shapes including circles, squares, rectangles, and organic forms - Define stroke weight, corner radius, and terminal style rules that create a recognizable visual signature across the entire set - Create a categorization system that organizes icons by function and makes the library easy to browse and search - Specify export requirements for every platform including SVG, PNG at multiple densities, icon font, and platform-native formats - Include guidelines for icon accessibility covering minimum touch targets, contrast requirements, and the necessity of text labels - Address both outlined and filled variants explaining when each style is appropriate - Do NOT mix metaphors or visual styles within the same icon set as inconsistency destroys the sense of a unified system - Do NOT design icons smaller than 24x24 pixels as the base size since finer details become illegible at common display sizes ## TASK CRITERIA 1. **Grid and Keyline System** -- Define the base grid size, keyline shapes for different icon categories, padding rules, and optical alignment corrections that ensure every icon feels visually balanced 2. **Style Definition** -- Specify stroke weight, corner radius, cap style, join style, and any decorative elements like notches or breaks that form the distinctive visual character of the set 3. **Size Scale** -- Define the available icon sizes such as 16, 20, 24, 32, 40, and 48 pixels with rules for how stroke weight and detail level adapt at each size 4. **Color Application** -- Establish color rules including single-color, dual-tone, and full-color variants with specifications for how icons inherit color from their UI context 5. **Icon Inventory Planning** -- Create a comprehensive inventory of required icons organized by category such as navigation, actions, communication, content types, status indicators, and social 6. **Variant System** -- Define the variant structure including outlined, filled, and duotone versions with clear guidance on when to use each variant for optimal communication 7. **Naming Convention** -- Establish a systematic naming convention that enables efficient searching, prevents duplicates, and maps cleanly to code component names 8. **Export and Implementation** -- Specify export formats, optimization requirements, sprite sheet structure, icon font generation, and integration patterns for web and native app platforms 9. **Usage Guidelines** -- Document sizing rules, spacing from adjacent elements, alignment with text, and interaction state treatments for icons used as buttons ## INFORMATION ABOUT ME - My product or brand: [INSERT YOUR PRODUCT OR BRAND NAME] - My platform: [INSERT WEB, IOS, ANDROID, OR CROSS-PLATFORM] - My design tool: [INSERT FIGMA, SKETCH, ADOBE ILLUSTRATOR, OR OTHER] - My existing icon approach: [INSERT WHETHER YOU USE A THIRD-PARTY SET OR HAVE CUSTOM ICONS] - My estimated icon count: [INSERT APPROXIMATELY HOW MANY ICONS YOU NEED] - My brand style: [INSERT YOUR VISUAL STYLE SUCH AS MINIMAL, PLAYFUL, TECHNICAL, ORGANIC] - My development framework: [INSERT REACT, SWIFT, KOTLIN, FLUTTER, OR OTHER] ## RESPONSE FORMAT - Structure the output as an icon design system specification with clearly defined sections - Include grid and keyline diagrams described in precise measurements - Use tables for size scale specifications showing pixel size, stroke weight, padding, and detail level for each size - Provide a categorized icon inventory template with category names and example icon lists - Include a naming convention reference with pattern examples and category prefixes - End with an icon review checklist for quality-controlling new icons before adding them to the library
Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[INSERT YOUR PRODUCT OR BRAND NAME][INSERT APPROXIMATELY HOW MANY ICONS YOU NEED]