Stockio
Web DesignWeb DevelopmentTechToolsResourcesAdvertise

Web Design articles

UI DesignUX & ResearchTypography & ColourIcons & IllustrationDesign SystemsMotion & AnimationBranding & BusinessAI for Design & UX

Web Development articles

HTML & CSSJavaScript & FrameworksBackend & APIsPerformance & SEODevOps & DeploymentAccessibilityDev Tools & AI CodingAI Builders & APIs

Tech articles

Smartphones & TabletsLaptops & PCsSmart Home & GadgetsHome Wi-Fi & InternetOnline Security & ScamsStreaming & GamingWeb Hosting & ServersVPN & Online Privacy
Articles

Icons & Illustration

Icon systems, SVG workflows, illustration styles and the small graphics that give a product its personality.

Icons & Illustration

Export SVG From Figma: Clean SVGs for the Web

Turn Figma artwork into predictable web SVGs with a repeatable export workflow covering frames, strokes, viewBox sizing, optimization, theming and visual checks.

Inside this article
  • Define what the exported asset must do
  • Prepare a deliberate export boundary
  • Resolve strokes, text and special effects
  • Inspect the markup and preserve useful structure
Mateo FernándezMateo FernándezRead the article
Icons & Illustration

Optimize SVG Icons for the Web: Best Practices and Tools

Ship smaller, accessible SVG icons with a repeatable cleanup workflow, safe markup patterns, and visual checks that catch broken paths before release.

Mateo FernándezMateo Fernández
Icons & Illustration

SVG Mask in CSS: Use SVG Icons as CSS Masks

Render monochrome SVG silhouettes with CSS masks, including sizing, background colors, asset delivery, and practical limits for interface icon systems.

Aiko TanakaAiko Tanaka
Icons & Illustration

Align Icons With Text in Buttons, Lists and Labels

Set reliable icon sizes, gaps and alignment rules for buttons, multiline lists and compact labels without relying on fragile one-off position adjustments.

Mateo FernándezMateo Fernández
Icons & Illustration

SVG viewBox Explained: Scale Icons Without Cropping

Understand SVG viewBox coordinates, intrinsic dimensions, and aspect-ratio behavior so icons scale predictably without clipped strokes or distorted shapes.

Inside this article
  • Separate drawing coordinates from display dimensions
  • Understand how the viewport receives the drawing
  • Fix cropping by checking painted bounds
  • Normalize a family without losing alignment
Aiko TanakaAiko TanakaRead the article
AaAa
Icons & Illustration

SVG vs Icon Fonts: How to Choose and Migrate

Compare icon fonts and SVG for reliable interface symbols, then plan a migration that preserves sizing, visual weight, labels, and existing control behavior.

Mateo FernándezMateo Fernández
Icons & Illustration

Lucide vs Heroicons vs Phosphor vs Material Symbols

Compare four popular icon families by geometry, weights, coverage and delivery, then use a repeatable audit to choose a library that fits your product.

Aiko TanakaAiko Tanaka
Icons & Illustration

Icon Grid Design: Build a Consistent 24px Icon Grid

Build a coherent 24-pixel icon family using keylines, optical corrections, stroke rules, and practical checks that keep small interface symbols readable.

Aiko TanakaAiko Tanaka