Icons & Graphics: Decision Framework and Pure CSS

Every interface uses small graphics: icons in toolbars, favicons, loading indicators, decorative flourishes, and illustrations. Choosing the right technology (vector SVG, raster images, pure CSS, or icon fonts) affects performance, accessibility, how easy it is to theme, and how sharp things look on high-DPI screens.

This learning activity gives you a decision framework you can reuse on real projects, then walks through pure CSS techniques for simple icons and UI chrome so you know when CSS alone is enough and when you should reach for SVG or images instead.

The Big Picture: Four Common Approaches

Most projects combine these; the skill is knowing which tool fits which job.

• SVG (Scalable Vector Graphics): XML-based vectors. Scales cleanly, styleable with CSS when inline, small for simple icons, great for logos and UI icons.
• Raster images (.png, .webp, .jpg): Pixels. Best for photos, complex textures, screenshots, and artwork with effects that do not map well to vectors.
• Pure CSS: Borders, gradients, pseudo-elements, transforms, and animation. No extra HTTP request for tiny shapes; ideal for spinners, simple toggles, and geometric decorations.
• Icon fonts: A font file where glyphs are icons. Historically popular; today SVG icon systems are usually preferred for accessibility and sharper rendering, but you may still see fonts in legacy codebases.

A Practical Decision Framework

Walk through these questions in order when you add or change a graphic.

1. Is it a photograph or rich, non-vector artwork?

Use a raster format (webp or avif when supported, with png fallback for transparency if needed). Provide responsive sources (srcset) and meaningful alt text for content images.

2. Is it a logo, icon, diagram, or simple illustration?

Prefer SVG for scalability and (when inline) CSS theming. For complex illustrations with thousands of nodes, still often SVG, but optimize and test performance.

3. Does it need to match text color or theme instantly (light/dark)?

Inline SVG with currentColor or CSS variables is ideal. Pure CSS shapes can also follow color on a parent. Raster images need separate assets or filters unless you use masks (more work).

4. Is it a tiny UI affordance (spinner, caret, divider, three-line “hamburger”)?

Pure CSS is often enough: no network request, trivial to animate. If the shape grows complex or must match a design system asset pack, switch to SVG.

5. How many icons ship on first paint?

Hundreds of separate SVGs can add HTTP overhead; bundling into a sprite or inline sprite sheet, or using HTTP/2, changes the tradeoff. (You will learn sprite and <symbol> patterns in the next readings.)

6. What do assistive technologies need?

Decorative graphics should be hidden from screen readers. Meaningful icons need <title>/<desc> or adjacent text. Icon fonts can fail when users override fonts (see below).

Pure CSS Icons: Strengths and Limits

Pure CSS is excellent when:

• The shape is built from boxes, lines, circles, or gradients.
• You want zero extra requests and full control over animation.
• The graphic is decorative or paired with visible text.

Pure CSS is a poor fit when:

• The design requires precise paths (detailed logos, irregular curves).
• You need one asset to match design tools (Figma exports) or brand guidelines.
• Multiple themes need the same SVG asset for consistency across apps.

Demo: Loading Spinner (Pure CSS)

A common pattern is a rotating border segment. No images required.

The live example uses a single element and @keyframes.

        .spinner {
            width: 2rem;
            height: 2rem;
            border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    

Demo: “Hamburger” Menu Icon (Three Bars)

Three horizontal bars are easy with a wrapper and pseudo-elements.

        .burger {
            position: relative;
            width: 1.5rem;
            height: 2px;
            background: currentColor;
        }

        .burger::before,
        .burger::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: currentColor;
        }

        .burger::before {
            top: -6px;
        }

        .burger::after {
            top: 6px;
        }
    

Demo: CSS Triangle (Chevron)

The “border triangle” trick uses zero width/height and transparent borders on three sides. Useful for carets and tooltips.

        .caret-down {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid currentColor;
        }
    

Performance and Caching (Brief)

• Raster: Compress with modern codecs; avoid oversized dimensions; use responsive images.
• SVG: Minify and remove editor cruft; avoid huge path data if a simpler path works.
• CSS-only: No extra bytes for a tiny shape, but complex keyframe animations can still cost compositor work; profile on low-end devices.

What Comes Next

The next learning activities dive into SVG fundamentals, icon systems (<symbol>, sprites), and implementation patterns (styling, external vs inline, optimization). You will connect this decision framework to concrete SVG workflows.