Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Web Icons) expand_more
Icon Fundamentals
Inline SVG icon SVG sprite symbol Accessible icon button Decorative icon aria-hidden Icon with text label currentColor icon Icon sizing with em Icon alignment
CSS Icon Techniques
CSS mask icon Background-image icon Data URI icon Pseudo-element icon Icon hover state Disabled icon state High-contrast icon Dark-mode icon
Icon Systems
Reusable SVG symbol Icon component contract Icon naming conventions Icon size scale Stroke versus fill icons RTL directional icons Status icons Loading spinner icon
Performance & Accessibility
Sprite caching Avoid icon-font ligatures Hidden accessible label Focus-visible icon button Touch target sizing Motion-safe spinner Fallback icon SVG title versus aria-label
Web Icons / CSS Icon Techniques

Data URI icon

Learn Data URI icon in Web Icons with a focused explanation, a topic-specific example, and a mastery check.

12 min read • Beginner
web-icons-011.html
html 
<style>.dot{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%278%27%3E%3Ccircle cx=%274%27 cy=%274%27 r=%274%27 fill=%27%23059669%27/%3E%3C/svg%3E");width:8px;height:8px}</style><span class="dot" aria-hidden="true"></span>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Data URI icon Mastery Check →
← PREVIOUS
Background-image icon
NEXT →
Pseudo-element icon