skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

iconography-and-imagery

Guide grid-based icon construction, SVG delivery, and image optimization for UI design.

1|Updated Jun 9, 2026
Search Tags:#UI design#image optimization#iconography#imagery#icon design#icon style
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill iconography-and-imagery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: iconography-and-imagery
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/iconography-and-imagery
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill iconography-and-imagery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to creating and implementing iconography and imagery in UI design, offering solutions to common design challenges and best practices.

Core Features & Use Cases

  • Icon Grid & Construction: Offers guidelines on grid-based icon construction, standardization, and scaling.
  • Icon Style Systems: Explains various icon styles such as outline, filled, duotone, and two-tone.
  • Icon Usage: Details best practices for using icons effectively with labels and within specific design contexts.
  • SVG Delivery: Delivers guidance on using SVG for icon delivery, including best practices for performance and accessibility.
  • Imagery: Covers aspect ratios, art direction, image formats, and performance optimizations.
  • Illustration & Brand Imagery: Discusses illustration styles and performance considerations.
  • Photography, Scrims & Dark Mode: Offers best practices for incorporating text and branding into images, especially in dark mode.
  • Common Mistakes: Highlights common mistakes and provides alternative solutions.
  • Use Case: For a UX designer creating an application UI, this skill would guide them on creating a cohesive and accessible icon system, selecting appropriate imagery, and optimizing for performance and accessibility.

Quick Start

Start by defining the base grid and stroke size for your iconography. Then, select an icon style that best suits your design's needs.

Frequently Asked Questions about iconography-and-imagery

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a consistent UI icon system using a grid?▼

Create a UI icon system by defining a base grid and standardizing stroke sizes to ensure consistent scaling. This method provides guidelines for grid-based icon construction and cross-device consistency.

What are the best practices for SVG icon delivery in web design?▼

Best practices for SVG icon delivery involve using scalable vector graphics to ensure performance and accessibility. This approach provides copy-pasteable code and guidelines for optimizing SVG delivery in UI design.

What is the difference between outline, filled, and duotone icon styles?▼

Outline, filled, duotone, and two-tone are distinct icon style systems that alter visual weight and hierarchy. Choosing the appropriate style depends on your specific design context and labeling needs.

How do I optimize imagery for performance and dark mode in UI design?▼

Optimize imagery by selecting appropriate image formats, aspect ratios, and applying scrims for dark mode. This ensures performance optimizations and maintains text legibility over photography.

What are common mistakes to avoid when designing UI iconography?▼

Common UI iconography mistakes include inconsistent stroke sizes, ignoring grid-based construction, and poor label pairing. Alternative solutions and best practices are provided to fix these standardization errors.

Related Skills

Explore More Design & Creative Skills→
brainbytes-devbrainbytes-dev
3

visual-identity

Design comprehensive visual identity systems with color palettes, typography, and layout grids.

Community
Advanced
akobryan1akobryan1
1

banner-design

Generates customizable social media and advertising banners for multiple platforms and styles.

Community
Intermediate
jubscodesjubscodes
49

gsp-icons

Generate an iconography.md chunk with npm import paths, stroke widths, size tokens, and container CSS/Tailwind rules.

Community
Intermediate
thkim2015thkim2015

moai-tool-svg

Create, optimize, and transform SVG files using SVGO.

Community
Advanced