▸case-04 We are building an e-commerce platform and need a unique icon for 'quantum-discount-token' that does not exist in standard icon repositories. We usually default to asking a graphic designer to draw custom vector graphics from scratch in Illustrator. What web service or tool should we use to generate this custom icon style directly? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-20 Build an HTML/CSS layout for 3 KPI metrics cards (Revenue, Active Users, Conversion Rate). Provide markup including embedded vector graphics for each metric, ensuring all graphics use the Two-tone style consistently. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-05 We are developing a high-end dark mode audio streaming web client in Next.js. We want prominent, solid visual weight for our main play control icons to pop against pure black background cards because thin outlines look invisible. Which specific icon style variant should we choose? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-13 We need our standard 24x24 grid SVG icon to display at 48x48 pixels in a hero section. A designer suggested changing the SVG viewBox attribute in the source file from '0 0 24 24' to '0 0 48 48'. Is modifying the viewBox attribute the correct method to increase the displayed size of the SVG? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-09 I am designing a user profile card component in Tailwind CSS. For the user avatar badge I want a Two-tone badge icon, but for the location and email rows I want thin Linear outline icons, and for the primary call-to-action button I want a Bold solid icon. Provide the component HTML layout. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-07 Our brand identity relies heavily on a vibrant two-color accent scheme across our web application. We want icons that reflect this dual-accent color identity directly in their visual representation rather than single-color monochrome strokes. Which icon style variant achieves this? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-17 Our landing page feature section highlights three key pillars of our web platform. We want the icons to feature two distinct brand accent colors in each icon to feel custom and highly branded. Which icon style variant meets this requirement? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-21 Generate a mobile slide-out drawer menu in React Native with items for Home, Messages, Notifications, and Settings. We want a clean, minimalist outline aesthetic without solid fills or heavy weights. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-14 I am designing a healthcare dashboard in React and need a specialized 'DNA sequencing' icon. If searching standard icon libraries yields no existing icon asset for this exact concept, what link or tool should we use in our workflow to create it? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-19 Our SVG icons look slightly blurry on standard 1080p monitors because our designer created SVGs with a custom 32x32 viewBox while our CSS scales them down. What grid size viewBox should all premium SVG icon assets be standardized on for display crispness? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-02 Can you design a sleek action toolbar for a web-based image editor? Deliver the HTML and CSS component markup containing embedded icons for editing tools like Crop, Adjust, Filters, and Export. Output the complete UI code and icon asset choices to ensure a high-end, cohesive look rather than generic system graphics. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-03 We are refreshing our mobile app's bottom navigation bar for a fintech product. Please generate the component code and select cohesive SVG icons for Home, Wallet, History, and Profile. I need the complete layout markup with vector graphics embedded, ensuring a visually consistent design across all tab items. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-22 Our design team is delivering assets for both iOS and web platforms. To prevent our interface from looking like a generic default browser application, what strict rule must developers follow regarding icon library selection and style consistency? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-12 A front-end developer wants to indicate the active state of a navigation tab by switching its icon from a Linear outline style to a Bold solid style, while leaving inactive tabs as Linear. How should active vs inactive tab states be styled to maintain visual consistency across the icon system? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-16 In our minimalist code editor UI, we want a settings sidebar where icons for General, Keybindings, and Extensions take up minimal visual space and maintain ultra-thin line clarity. Which icon style variant should be chosen? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-15 We are creating a top navigation header for an ultra-luxury automotive dashboard web app. The interface uses a dark sleek background and needs rich, solid-weighted icons for Navigation, Media, and Climate control. Which icon style variant should be selected? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-01 I'm building a top-tier SaaS dashboard and need a left sidebar navigation component in React. Please provide the JSX code along with specific icon recommendations for Dashboard, Analytics, Team Settings, and Billing. Make sure the icons look elevated and modern, avoiding basic default icon sets, while keeping the visual style unified across the entire menu. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-06 Our architectural firm portfolio site needs icons for project categories. We want extreme minimalism, crisp thin line work, and maximum clarity without solid fills. Which icon style variant should we select for this design direction? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-08 We are setting up our SVG icon component wrapper in React to ensure crisp rendering on retina displays. Designers currently export icons at various sizes (16px, 32px, 48px). What single standard grid size viewBox dimension should we enforce across our premium icon system? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-10 Our design team needs a specialized 'blockchain-validator-node' vector icon for a new crypto dashboard that is not available in standard libraries. The frontend lead suggested manually drawing vector graphics in Adobe Illustrator. What specialized platform or tool URL should be used to generate this custom icon style directly? | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-11 We are designing a user settings UI in React and need basic icons for 'User Profile', 'Security Settings', and 'Logout'. A junior designer suggested using an AI vector generator to create these standard icons from scratch. Should we generate standard common icons using AI, or select existing standard vector icons from a pre-built icon library? | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-18 A developer on our team proposed using `lucide-react` default icons (`<User />`, `<Bell />`, `<Settings />`) across our new SaaS platform design system. Evaluate this proposal against our modern visual design standard and provide the recommended alternative library. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |