Using Icons and Graphics Correctly

What You’ll Learn

• When to use icons vs. illustrations/graphics.
• How to maintain a consistent style: stroke, corner radius, and grid.
• Accessibility rules for icons, labels, and contrast.
• Best file formats (SVG vs PNG) and performance tips.
• How to implement icons in WordPress/Elementor with Global Colors.

Icons vs. Graphics: What’s the Difference?

Build a Consistent Icon Style

1. Stroke vs. Fill: Pick one dominant style (outline or solid). Avoid mixing in the same component.
2. Stroke Weight: Keep line width consistent (e.g., 1.5px across all icons).
3. Corner Radius: Match your brand vibe (rounded for friendly, sharp for tech/minimal).
4. Grid: Use a 24px or 32px grid; ensure icons align optically and center correctly.
5. Color: Use currentColor so icons inherit text color and follow your Global Colors.
6. Size Scale: Define tokens like --icon-xs: 16px, --icon-sm: 20px, --icon-md: 24px, --icon-lg: 32px.

Accessibility: Labels, Contrast & Meaning

• Don’t use icons alone for critical info—pair with text labels or add aria-label on buttons.
• Decorative icons: mark as aria-hidden="true" and avoid redundant alt text.
• Interactive icons (e.g., button-only icons): add accessible text via aria-label or hidden text.
• Contrast: icon and text colors should meet WCAG contrast against the background (aim for ≥ 3:1 for non-text UI icons, ≥ 4.5:1 when they communicate meaning).
• Focus states: ensure visible focus outlines for icon buttons and links.

File Formats & Performance

• SVG for icons (scales crisply, tiny file size, easy to color with CSS).
• PNG for small, flat graphics on a fixed background; WebP for photos/complex illustrations.
• Optimize SVGs: remove metadata, keep paths simple, prefer stroke-linecap="round", stroke-linejoin="round" for clean outlines.
• Load only what you use. Avoid huge icon packs; curate a small set per site.
• Reuse illustrations: make a few flexible scenes/components instead of many one-offs.

Implementing Icons in WordPress + Elementor

1. Global Colors: Set Text, Muted Text, and Primary in Site Settings. Icons should inherit these.
2. Inline SVG: Use the HTML widget to paste SVG, or use Elementor’s Icon widget and set Custom Upload (SVG).
3. Consistency: Save a Button, Feature Card, and List Item as templates with icon sizes locked (e.g., 24px).
4. Spacing: Keep even padding around icons (e.g., 8px gap from label). Align to baseline with text.

Do’s & Don’ts

Copy Snippets

<style>
  .icon { width: 24px; height: 24px; vertical-align: middle; }
  .icon--sm { width: 20px; height: 20px; }
  .icon--lg { width: 32px; height: 32px; }
  .text-primary { color: var(--brand-primary, #2563EB); }
</style>

<span class="text-primary">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M21 10v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7"/>
    <path d="M7 10V7a5 5 0 0 1 10 0v3"/>
  </svg>
  Secure Checkout
</span>

<ul style="list-style:none; padding:0; margin:0;">
  <li style="display:flex; gap:.5rem; align-items:center; margin:.5rem 0;">
    <svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
      <path d="M20 6L9 17l-5-5"/>
    </svg>
    Free 30-day returns
  </li>
  <li style="display:flex; gap:.5rem; align-items:center; margin:.5rem 0;">
    <svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
      <circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>
    </svg>
    24/7 support
  </li>
</ul>

Graphics & Illustrations: Guidelines

• Match your brand style: line/flat style, color palette, and shapes should echo your brand’s vibe.
• Simplify: Reduce details at small sizes; avoid thin lines below 1px at display scale.
• Hierarchy: Keep illustrations secondary to headlines and CTAs.
• Backgrounds: Prefer transparent SVGs/PNGs; avoid heavy drop-shadows that muddy at compression.
• Licensing: Use assets you have rights to; document source and license in your brand folder.

Hands-On: Make Your Icon Set (15–25 min)

1. Pick a family: Choose a single icon library/style that fits your brand (outline or filled).
2. Define tokens: Size (16/20/24/32), stroke (1.5px), radius (2–3px), and color mapping (Text/Primary/Muted).
3. Create 10 core icons: Phone, Email, Location, Clock, Check, Arrow, Play, Download, User, Shield.
4. Implement: Add to Header, Footer, Contact, and Feature cards using Elementor widgets or HTML.
5. QA pass: Check alignment, contrast on backgrounds, focus states, and mobile spacing.

Quick Checklist

• One consistent icon style (stroke or fill) across the site.
• Sizes and spacing standardized (tokens documented).
• SVGs optimized and inheriting currentColor.
• Icons paired with labels; decorative icons hidden from assistive tech.
• Contrast and focus states verified.
• Graphics match palette and tone; licenses documented.

FAQ: Common Beginner Questions