[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:icons-svg-and-icon-fonts":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":547,"title":548,"slug":549,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":89,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":742,"quiz":768,"exercises":772,"published_at":5,"updated_at":786,"prev":787,"next":788},"\u003Ch2 id=\"icons-in-web-design-svg-and-icon-fonts\">Icons in Web Design: SVG and Icon Fonts\u003C\u002Fh2>\u003Cp>Icons communicate meaning faster than words. A magnifying glass means search, a heart means favourite, a cart means shopping. Choosing the right method to add \u003Cstrong>SVG icons and icon fonts\u003C\u002Fstrong> affects your page speed, accessibility, sharpness on high-DPI screens, and how easy the icons are to style with CSS. This lesson explains every method, compares them, and gives you live code for each.\u003C\u002Fp>\u003Cp>\u003Cstrong>Focus keyword:\u003C\u002Fstrong> SVG icons and icon fonts. \u003Cstrong>Related keywords:\u003C\u002Fstrong> inline SVG, SVG sprite, currentColor, viewBox, Font Awesome, Material Symbols, Bootstrap Icons, Lucide icons, Heroicons, Phosphor icons, Iconify, CSS mask-image icons, accessible icons, aria-hidden.\u003C\u002Fp>\u003Ch2 id=\"1-ways-to-add-icons-to-a-web-page\">1. Ways to Add Icons to a Web Page\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Method\u003C\u002Fth>\u003Cth>How it works\u003C\u002Fth>\u003Cth>CSS colour control\u003C\u002Fth>\u003Cth>Best for\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Inline SVG\u003C\u002Ftd>\u003Ctd>SVG code written directly in the HTML\u003C\u002Ftd>\u003Ctd>Full (fill, stroke, currentColor)\u003C\u002Ftd>\u003Ctd>A few important icons, animations\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>SVG sprite with use\u003C\u002Ftd>\u003Ctd>Many symbols in one SVG, referenced by id\u003C\u002Ftd>\u003Ctd>Good (via currentColor)\u003C\u002Ftd>\u003Ctd>Large icon sets reused across pages\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>img tag with SVG file\u003C\u002Ftd>\u003Ctd>Icon loaded as an image file\u003C\u002Ftd>\u003Ctd>None (colour is fixed in the file)\u003C\u002Ftd>\u003Ctd>Decorative, multicolour illustrations\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>CSS background or mask-image\u003C\u002Ftd>\u003Ctd>Icon used as a CSS image\u003C\u002Ftd>\u003Ctd>mask-image allows colour with background-color\u003C\u002Ftd>\u003Ctd>Pseudo-element icons, list bullets\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Icon font\u003C\u002Ftd>\u003Ctd>Icons are glyphs in a web font\u003C\u002Ftd>\u003Ctd>Uses the text color property\u003C\u002Ftd>\u003Ctd>Quick prototypes, legacy projects\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"2-svg-basics\">2. SVG Basics\u003C\u002Fh2>\u003Cp>SVG (Scalable Vector Graphics) is an XML-based format that describes shapes with math instead of pixels. That means it stays sharp at any size and on any screen density, and files are usually tiny.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>viewBox='0 0 24 24'\u003C\u002Fcode> defines the internal coordinate system. The icon scales to whatever width and height you set in CSS.\u003C\u002Fli>\u003Cli>\u003Ccode>fill\u003C\u002Fcode> colours the inside of shapes. \u003Ccode>stroke\u003C\u002Fcode> colours the outline. Outline icon sets such as Feather and Lucide use \u003Ccode>fill='none'\u003C\u002Fcode> and a stroke.\u003C\u002Fli>\u003Cli>\u003Ccode>stroke-width\u003C\u002Fcode>, \u003Ccode>stroke-linecap\u003C\u002Fcode> and \u003Ccode>stroke-linejoin\u003C\u002Fcode> control the line style.\u003C\u002Fli>\u003Cli>\u003Ccode>currentColor\u003C\u002Fcode> makes the icon inherit the text colour, so a single CSS \u003Ccode>color\u003C\u002Fcode> change restyles both text and icon.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"sizing-icons\">Sizing Icons\u003C\u002Fh3>\u003Cp>Set icon size in \u003Ccode>em\u003C\u002Fcode> (for example \u003Ccode>1.25em\u003C\u002Fcode>) so it scales with the surrounding font size. Use \u003Ccode>vertical-align: -0.125em\u003C\u002Fcode> or flexbox with \u003Ccode>align-items: center\u003C\u002Fcode> to line icons up with text.\u003C\u002Fp>\u003Ch2 id=\"3-svg-sprites\">3. SVG Sprites\u003C\u002Fh2>\u003Cp>A sprite is one hidden SVG containing multiple \u003Ccode><symbol>\u003C\u002Fcode> elements. You display an icon with \u003Ccode><svg><use href='#icon-id'\u002F><\u002Fsvg>\u003C\u002Fcode>. This avoids repeating long path data and keeps HTML clean. Sprites can be inlined in the page or loaded from an external file, though external sprites have cross-origin restrictions.\u003C\u002Fp>\u003Ch2 id=\"4-icon-fonts\">4. Icon Fonts\u003C\u002Fh2>\u003Cp>An icon font maps icons to characters in a custom font. Popular examples are \u003Cstrong>Font Awesome\u003C\u002Fstrong>, \u003Cstrong>Bootstrap Icons\u003C\u002Fstrong> and \u003Cstrong>Material Symbols\u003C\u002Fstrong>. You add a stylesheet, then use an element with a class name such as \u003Ccode><i class='fa-solid fa-house'><\u002Fi>\u003C\u002Fcode>. Icons are sized with \u003Ccode>font-size\u003C\u002Fcode> and coloured with \u003Ccode>color\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"icon-font-drawbacks\">Icon Font Drawbacks\u003C\u002Fh3>\u003Cul>\u003Cli>The whole font file downloads even if you use only a few icons.\u003C\u002Fli>\u003Cli>If the font fails to load, users may see empty boxes or the wrong character.\u003C\u002Fli>\u003Cli>Icons render as text, so anti-aliasing can look slightly blurry and alignment is finicky.\u003C\u002Fli>\u003Cli>Screen readers may announce the glyph. Add \u003Ccode>aria-hidden='true'\u003C\u002Fcode> for decorative icons.\u003C\u002Fli>\u003Cli>They are single colour only.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"svg-vs-icon-fonts-which-to-choose\">SVG vs Icon Fonts: Which to Choose?\u003C\u002Fh3>\u003Cp>For most modern projects, SVG is the recommended choice: sharper rendering, better accessibility, multicolour support, animation, and tree-shaking (shipping only the icons you use). Icon fonts remain useful for fast prototyping, CMS themes, or when a library offers a convenient class-based system. Material Symbols is a modern variable icon font that lets you adjust fill, weight, grade and optical size with \u003Ccode>font-variation-settings\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"5-accessibility-for-icons\">5. Accessibility for Icons\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Decorative icons\u003C\u002Fstrong> (next to visible text): hide them with \u003Ccode>aria-hidden='true'\u003C\u002Fcode> and \u003Ccode>focusable='false'\u003C\u002Fcode> on the SVG.\u003C\u002Fli>\u003Cli>\u003Cstrong>Icon-only buttons\u003C\u002Fstrong>: give the button an accessible name with \u003Ccode>aria-label\u003C\u002Fcode> or visually hidden text. Never leave an icon button unlabelled.\u003C\u002Fli>\u003Cli>\u003Cstrong>Meaningful standalone icons\u003C\u002Fstrong>: use \u003Ccode>role='img'\u003C\u002Fcode> and a \u003Ccode><title>\u003C\u002Fcode> linked with \u003Ccode>aria-labelledby\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Ensure a 3:1 contrast ratio for meaningful icons against their background.\u003C\u002Fli>\u003Cli>Keep touch targets at least 24 by 24 CSS pixels (44 by 44 is ideal on mobile).\u003C\u002Fli>\u003Cli>Do not communicate status using icon colour alone.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-css-mask-image-icons\">6. CSS mask-image Icons\u003C\u002Fh2>\u003Cp>With \u003Ccode>mask-image\u003C\u002Fcode> you can use an SVG as a shape and colour it with \u003Ccode>background-color: currentColor\u003C\u002Fcode>. This gives you the colour control of inline SVG while keeping the icon in CSS, which is perfect for pseudo-elements like \u003Ccode>::before\u003C\u002Fcode> and \u003Ccode>::after\u003C\u002Fcode>. Include the \u003Ccode>-webkit-mask\u003C\u002Fcode> prefix for wider browser support.\u003C\u002Fp>\u003Ch2 id=\"7-performance-tips\">7. Performance Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Optimise SVG files with SVGO or SVGOMG to strip metadata and shorten paths.\u003C\u002Fli>\u003Cli>Inline only critical icons, and use a sprite for the rest.\u003C\u002Fli>\u003Cli>Use \u003Ccode>preconnect\u003C\u002Fcode> for external icon font CDNs, and pin library versions.\u003C\u002Fli>\u003Cli>Prefer subsetted fonts or individual SVGs over loading a full icon font.\u003C\u002Fli>\u003Cli>Use \u003Ccode>font-display: swap\u003C\u002Fcode> so text is not blocked while an icon font loads.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"8-trending-icon-libraries-and-techniques-2026\">8. Trending Icon Libraries and Techniques (2026)\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Lucide\u003C\u002Fstrong>, \u003Cstrong>Heroicons\u003C\u002Fstrong>, \u003Cstrong>Phosphor\u003C\u002Fstrong> and \u003Cstrong>Tabler Icons\u003C\u002Fstrong>: modern, consistent SVG sets that work well with React, Vue and plain HTML.\u003C\u002Fli>\u003Cli>\u003Cstrong>Iconify\u003C\u002Fstrong>: access many icon sets through a single API and on-demand loading.\u003C\u002Fli>\u003Cli>\u003Cstrong>Material Symbols\u003C\u002Fstrong>: variable icon font with adjustable weight and fill.\u003C\u002Fli>\u003Cli>\u003Cstrong>currentColor everywhere\u003C\u002Fstrong> for easy dark mode and theming.\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS mask-image\u003C\u002Fstrong> icons for lightweight, themeable UI details.\u003C\u002Fli>\u003Cli>\u003Cstrong>Animated SVG and micro-interactions\u003C\u002Fstrong> with CSS transitions and keyframes, while respecting \u003Ccode>prefers-reduced-motion\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-common-mistakes\">9. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting the \u003Ccode>viewBox\u003C\u002Fcode>, which stops the icon from scaling properly.\u003C\u002Fli>\u003Cli>Using hard-coded fill colours instead of \u003Ccode>currentColor\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Icon-only buttons with no accessible name.\u003C\u002Fli>\u003Cli>Loading an entire icon font for two icons.\u003C\u002Fli>\u003Cli>Not hiding decorative icons from screen readers.\u003C\u002Fli>\u003Cli>Mixing icon sets with different stroke widths and styles.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Use inline SVG or sprites for crisp, accessible and stylable icons. Use icon fonts when you need a fast, class-based system. Always inherit colour with \u003Ccode>currentColor\u003C\u002Fcode>, size icons in \u003Ccode>em\u003C\u002Fcode>, hide decorative icons from assistive technology, and label icon-only controls. Try all the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; font-size: 20px; padding: 20px; }\n  .icon { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }\n  .blue { color: #2563eb; }\n  .red { color: #dc2626; }\n<\u002Fstyle>\n<p class='blue'>\n  <svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true' focusable='false'>\n    <path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'\u002F>\n    <polyline points='9 22 9 12 15 12 15 22'\u002F>\n  <\u002Fsvg>\n  Home (blue, inherits text colour)\n<\u002Fp>\n<p class='red'>\n  <svg class='icon' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' focusable='false'>\n    <path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'\u002F>\n  <\u002Fsvg>\n  Favourite (red, filled)\n<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 20px; color: #0f172a; }\n  .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n  .sm { width: 16px; height: 16px; }\n  .md { width: 32px; height: 32px; }\n  .lg { width: 64px; height: 64px; }\n  .thin { stroke-width: 1; }\n  .bold { stroke-width: 3; color: #7c3aed; }\n<\u002Fstyle>\n<svg class='icon sm' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F><\u002Fsvg>\n<svg class='icon md' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F><\u002Fsvg>\n<svg class='icon lg thin' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F><\u002Fsvg>\n<svg class='icon lg bold' viewBox='0 0 24 24' aria-hidden='true'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F><\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><svg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' style='display:none'>\n  <symbol id='i-home' viewBox='0 0 24 24'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'\u002F><polyline points='9 22 9 12 15 12 15 22'\u002F><\u002Fsymbol>\n  <symbol id='i-search' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'\u002F><line x1='21' y1='21' x2='16.65' y2='16.65'\u002F><\u002Fsymbol>\n  <symbol id='i-check' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12'\u002F><\u002Fsymbol>\n<\u002Fsvg>\n<style>\n  body { font-family: system-ui, sans-serif; font-size: 18px; padding: 20px; line-height: 2.2; }\n  .icon { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.3em; margin-right: 0.4em; }\n  .ok { color: #16a34a; }\n<\u002Fstyle>\n<div><svg class='icon' aria-hidden='true'><use href='#i-home'\u002F><\u002Fsvg>Home<\u002Fdiv>\n<div><svg class='icon' aria-hidden='true'><use href='#i-search'\u002F><\u002Fsvg>Search<\u002Fdiv>\n<div class='ok'><svg class='icon' aria-hidden='true'><use href='#i-check'\u002F><\u002Fsvg>Saved successfully<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px;\n    height: 44px;\n    border: 0;\n    border-radius: 50%;\n    background: #e2e8f0;\n    color: #0f172a;\n    cursor: pointer;\n    transition: background 0.2s ease;\n  }\n  .icon-btn:hover { background: #cbd5e1; }\n  .icon-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }\n  .icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n  .with-text { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 0; border-radius: 8px; background: #2563eb; color: #ffffff; font-size: 1rem; cursor: pointer; }\n  .with-text svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n<\u002Fstyle>\n<button class='icon-btn' type='button' aria-label='Search'>\n  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><circle cx='11' cy='11' r='8'\u002F><line x1='21' y1='21' x2='16.65' y2='16.65'\u002F><\u002Fsvg>\n<\u002Fbutton>\n<button class='with-text' type='button'>\n  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><polyline points='20 6 9 17 4 12'\u002F><\u002Fsvg>\n  Save changes\n<\u002Fbutton>\n<p>\n  <svg role='img' aria-labelledby='warn-title' viewBox='0 0 24 24' width='28' height='28' fill='none' stroke='#b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\n    <title id='warn-title'>Warning<\u002Ftitle>\n    <path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'\u002F>\n    <line x1='12' y1='9' x2='12' y2='13'\u002F><line x1='12' y1='17' x2='12.01' y2='17'\u002F>\n  <\u002Fsvg>\n<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><link rel='stylesheet' href='https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F6.5.2\u002Fcss\u002Fall.min.css'>\n<style>\n  body { font-family: system-ui, sans-serif; font-size: 22px; padding: 20px; line-height: 2.2; }\n  .brand { color: #0f172a; }\n  .love { color: #e11d48; }\n  i { margin-right: 0.4em; }\n<\u002Fstyle>\n<div><i class='fa-solid fa-house' aria-hidden='true'><\u002Fi>Home<\u002Fdiv>\n<div class='love'><i class='fa-regular fa-heart' aria-hidden='true'><\u002Fi>Favourite<\u002Fdiv>\n<div class='brand'><i class='fa-brands fa-github' aria-hidden='true'><\u002Fi>GitHub<\u002Fdiv>\n<div><i class='fa-solid fa-spinner fa-spin' aria-hidden='true'><\u002Fi>Loading...<\u002Fdiv>\n<div style='font-size: 40px; color: #2563eb;'><i class='fa-solid fa-rocket' aria-hidden='true'><\u002Fi>Big icon via font-size<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><link href='https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' rel='stylesheet'>\n<style>\n  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 18px; }\n  .material-symbols-outlined {\n    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n    font-size: 36px;\n    vertical-align: middle;\n    transition: font-variation-settings 0.25s ease, color 0.25s ease;\n  }\n  .material-symbols-outlined:hover {\n    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n    color: #e11d48;\n  }\n  .row { display: flex; gap: 1.5rem; align-items: center; }\n<\u002Fstyle>\n<div class='row'>\n  <span class='material-symbols-outlined' aria-hidden='true'>home<\u002Fspan>\n  <span class='material-symbols-outlined' aria-hidden='true'>favorite<\u002Fspan>\n  <span class='material-symbols-outlined' aria-hidden='true'>search<\u002Fspan>\n  <span class='material-symbols-outlined' aria-hidden='true'>settings<\u002Fspan>\n<\u002Fdiv>\n<p>Hover an icon to animate from outline to filled using variable font axes.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 20px; }\n  .icon-mask {\n    display: inline-block;\n    width: 1.5rem;\n    height: 1.5rem;\n    vertical-align: -0.3rem;\n    margin-right: 0.4rem;\n    background-color: currentColor;\n    -webkit-mask: url('data:image\u002Fsvg+xml;utf8,<svg xmlns=%27http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg%27 viewBox=%270 0 24 24%27><polyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27\u002F><\u002Fsvg>') center \u002F contain no-repeat;\n    mask: url('data:image\u002Fsvg+xml;utf8,<svg xmlns=%27http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg%27 viewBox=%270 0 24 24%27><polyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27\u002F><\u002Fsvg>') center \u002F contain no-repeat;\n  }\n  .success { color: #16a34a; }\n  .brand { color: #7c3aed; }\n<\u002Fstyle>\n<p class='success'><span class='icon-mask' aria-hidden='true'><\u002Fspan>Green check from a CSS mask<\u002Fp>\n<p class='brand'><span class='icon-mask' aria-hidden='true'><\u002Fspan>Purple check, same icon, only color changed<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  .like-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 2px solid #e11d48; border-radius: 999px; background: transparent; color: #e11d48; font-size: 1rem; cursor: pointer; }\n  .like-btn svg { width: 1.3em; height: 1.3em; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.2s ease, transform 0.2s ease; }\n  .like-btn:hover svg { fill: currentColor; transform: scale(1.2); }\n  .like-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n  .spinner { width: 32px; height: 32px; fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; animation: spin 1s linear infinite; margin-left: 1rem; vertical-align: middle; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) {\n    .spinner { animation: none; }\n    .like-btn svg { transition: none; }\n  }\n<\u002Fstyle>\n<button class='like-btn' type='button'>\n  <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'\u002F><\u002Fsvg>\n  Like\n<\u002Fbutton>\n<svg class='spinner' viewBox='0 0 24 24' role='img' aria-label='Loading'><path d='M12 2a10 10 0 0 1 10 10'\u002F><\u002Fsvg>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":519,"slug":520},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Ficons-svg-and-icon-fonts","SVG Icons & Icon Fonts: Complete CSS Guide","Learn how to use SVG icons and icon fonts: inline SVG, sprites, currentColor, Font Awesome, Material Symbols, accessibility and performance tips.",[686,690,694,702,706,718,722,726,730,734,738],{"id":687,"text":688,"level":12,"children":689},"icons-in-web-design-svg-and-icon-fonts","Icons in Web Design: SVG and Icon Fonts",[],{"id":691,"text":692,"level":12,"children":693},"1-ways-to-add-icons-to-a-web-page","1. Ways to Add Icons to a Web Page",[],{"id":695,"text":696,"level":12,"children":697},"2-svg-basics","2. SVG Basics",[698],{"id":699,"text":700,"level":57,"children":701},"sizing-icons","Sizing Icons",[],{"id":703,"text":704,"level":12,"children":705},"3-svg-sprites","3. SVG Sprites",[],{"id":707,"text":708,"level":12,"children":709},"4-icon-fonts","4. Icon Fonts",[710,714],{"id":711,"text":712,"level":57,"children":713},"icon-font-drawbacks","Icon Font Drawbacks",[],{"id":715,"text":716,"level":57,"children":717},"svg-vs-icon-fonts-which-to-choose","SVG vs Icon Fonts: Which to Choose?",[],{"id":719,"text":720,"level":12,"children":721},"5-accessibility-for-icons","5. Accessibility for Icons",[],{"id":723,"text":724,"level":12,"children":725},"6-css-mask-image-icons","6. CSS mask-image Icons",[],{"id":727,"text":728,"level":12,"children":729},"7-performance-tips","7. Performance Tips",[],{"id":731,"text":732,"level":12,"children":733},"8-trending-icon-libraries-and-techniques-2026","8. Trending Icon Libraries and Techniques (2026)",[],{"id":735,"text":736,"level":12,"children":737},"9-common-mistakes","9. Common Mistakes",[],{"id":739,"text":740,"level":12,"children":741},"summary","Summary",[],[743,747,750,753,756,759,762,765],{"id":744,"language":16,"code":745,"is_editable":746},391,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 20px; padding: 20px; }\n  .icon { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }\n  .blue { color: #2563eb; }\n  .red { color: #dc2626; }\n\u003C\u002Fstyle>\n\u003Cp class='blue'>\n  \u003Csvg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true' focusable='false'>\n    \u003Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'\u002F>\n    \u003Cpolyline points='9 22 9 12 15 12 15 22'\u002F>\n  \u003C\u002Fsvg>\n  Home (blue, inherits text colour)\n\u003C\u002Fp>\n\u003Cp class='red'>\n  \u003Csvg class='icon' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' focusable='false'>\n    \u003Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'\u002F>\n  \u003C\u002Fsvg>\n  Favourite (red, filled)\n\u003C\u002Fp>",true,{"id":748,"language":16,"code":749,"is_editable":746},392,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; color: #0f172a; }\n  .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n  .sm { width: 16px; height: 16px; }\n  .md { width: 32px; height: 32px; }\n  .lg { width: 64px; height: 64px; }\n  .thin { stroke-width: 1; }\n  .bold { stroke-width: 3; color: #7c3aed; }\n\u003C\u002Fstyle>\n\u003Csvg class='icon sm' viewBox='0 0 24 24' aria-hidden='true'>\u003Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F>\u003C\u002Fsvg>\n\u003Csvg class='icon md' viewBox='0 0 24 24' aria-hidden='true'>\u003Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F>\u003C\u002Fsvg>\n\u003Csvg class='icon lg thin' viewBox='0 0 24 24' aria-hidden='true'>\u003Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F>\u003C\u002Fsvg>\n\u003Csvg class='icon lg bold' viewBox='0 0 24 24' aria-hidden='true'>\u003Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'\u002F>\u003C\u002Fsvg>",{"id":751,"language":16,"code":752,"is_editable":746},393,"\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' style='display:none'>\n  \u003Csymbol id='i-home' viewBox='0 0 24 24'>\u003Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'\u002F>\u003Cpolyline points='9 22 9 12 15 12 15 22'\u002F>\u003C\u002Fsymbol>\n  \u003Csymbol id='i-search' viewBox='0 0 24 24'>\u003Ccircle cx='11' cy='11' r='8'\u002F>\u003Cline x1='21' y1='21' x2='16.65' y2='16.65'\u002F>\u003C\u002Fsymbol>\n  \u003Csymbol id='i-check' viewBox='0 0 24 24'>\u003Cpolyline points='20 6 9 17 4 12'\u002F>\u003C\u002Fsymbol>\n\u003C\u002Fsvg>\n\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 18px; padding: 20px; line-height: 2.2; }\n  .icon { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.3em; margin-right: 0.4em; }\n  .ok { color: #16a34a; }\n\u003C\u002Fstyle>\n\u003Cdiv>\u003Csvg class='icon' aria-hidden='true'>\u003Cuse href='#i-home'\u002F>\u003C\u002Fsvg>Home\u003C\u002Fdiv>\n\u003Cdiv>\u003Csvg class='icon' aria-hidden='true'>\u003Cuse href='#i-search'\u002F>\u003C\u002Fsvg>Search\u003C\u002Fdiv>\n\u003Cdiv class='ok'>\u003Csvg class='icon' aria-hidden='true'>\u003Cuse href='#i-check'\u002F>\u003C\u002Fsvg>Saved successfully\u003C\u002Fdiv>",{"id":754,"language":16,"code":755,"is_editable":746},394,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px;\n    height: 44px;\n    border: 0;\n    border-radius: 50%;\n    background: #e2e8f0;\n    color: #0f172a;\n    cursor: pointer;\n    transition: background 0.2s ease;\n  }\n  .icon-btn:hover { background: #cbd5e1; }\n  .icon-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }\n  .icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n  .with-text { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 0; border-radius: 8px; background: #2563eb; color: #ffffff; font-size: 1rem; cursor: pointer; }\n  .with-text svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\u003C\u002Fstyle>\n\u003Cbutton class='icon-btn' type='button' aria-label='Search'>\n  \u003Csvg viewBox='0 0 24 24' aria-hidden='true' focusable='false'>\u003Ccircle cx='11' cy='11' r='8'\u002F>\u003Cline x1='21' y1='21' x2='16.65' y2='16.65'\u002F>\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\u003Cbutton class='with-text' type='button'>\n  \u003Csvg viewBox='0 0 24 24' aria-hidden='true' focusable='false'>\u003Cpolyline points='20 6 9 17 4 12'\u002F>\u003C\u002Fsvg>\n  Save changes\n\u003C\u002Fbutton>\n\u003Cp>\n  \u003Csvg role='img' aria-labelledby='warn-title' viewBox='0 0 24 24' width='28' height='28' fill='none' stroke='#b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\n    \u003Ctitle id='warn-title'>Warning\u003C\u002Ftitle>\n    \u003Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'\u002F>\n    \u003Cline x1='12' y1='9' x2='12' y2='13'\u002F>\u003Cline x1='12' y1='17' x2='12.01' y2='17'\u002F>\n  \u003C\u002Fsvg>\n\u003C\u002Fp>",{"id":757,"language":16,"code":758,"is_editable":746},395,"\u003Clink rel='stylesheet' href='https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F6.5.2\u002Fcss\u002Fall.min.css'>\n\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 22px; padding: 20px; line-height: 2.2; }\n  .brand { color: #0f172a; }\n  .love { color: #e11d48; }\n  i { margin-right: 0.4em; }\n\u003C\u002Fstyle>\n\u003Cdiv>\u003Ci class='fa-solid fa-house' aria-hidden='true'>\u003C\u002Fi>Home\u003C\u002Fdiv>\n\u003Cdiv class='love'>\u003Ci class='fa-regular fa-heart' aria-hidden='true'>\u003C\u002Fi>Favourite\u003C\u002Fdiv>\n\u003Cdiv class='brand'>\u003Ci class='fa-brands fa-github' aria-hidden='true'>\u003C\u002Fi>GitHub\u003C\u002Fdiv>\n\u003Cdiv>\u003Ci class='fa-solid fa-spinner fa-spin' aria-hidden='true'>\u003C\u002Fi>Loading...\u003C\u002Fdiv>\n\u003Cdiv style='font-size: 40px; color: #2563eb;'>\u003Ci class='fa-solid fa-rocket' aria-hidden='true'>\u003C\u002Fi>Big icon via font-size\u003C\u002Fdiv>",{"id":760,"language":16,"code":761,"is_editable":746},396,"\u003Clink href='https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' rel='stylesheet'>\n\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 18px; }\n  .material-symbols-outlined {\n    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n    font-size: 36px;\n    vertical-align: middle;\n    transition: font-variation-settings 0.25s ease, color 0.25s ease;\n  }\n  .material-symbols-outlined:hover {\n    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n    color: #e11d48;\n  }\n  .row { display: flex; gap: 1.5rem; align-items: center; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cspan class='material-symbols-outlined' aria-hidden='true'>home\u003C\u002Fspan>\n  \u003Cspan class='material-symbols-outlined' aria-hidden='true'>favorite\u003C\u002Fspan>\n  \u003Cspan class='material-symbols-outlined' aria-hidden='true'>search\u003C\u002Fspan>\n  \u003Cspan class='material-symbols-outlined' aria-hidden='true'>settings\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cp>Hover an icon to animate from outline to filled using variable font axes.\u003C\u002Fp>",{"id":763,"language":16,"code":764,"is_editable":746},397,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; font-size: 20px; }\n  .icon-mask {\n    display: inline-block;\n    width: 1.5rem;\n    height: 1.5rem;\n    vertical-align: -0.3rem;\n    margin-right: 0.4rem;\n    background-color: currentColor;\n    -webkit-mask: url('data:image\u002Fsvg+xml;utf8,\u003Csvg xmlns=%27http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg%27 viewBox=%270 0 24 24%27>\u003Cpolyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27\u002F>\u003C\u002Fsvg>') center \u002F contain no-repeat;\n    mask: url('data:image\u002Fsvg+xml;utf8,\u003Csvg xmlns=%27http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg%27 viewBox=%270 0 24 24%27>\u003Cpolyline points=%2720 6 9 17 4 12%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27\u002F>\u003C\u002Fsvg>') center \u002F contain no-repeat;\n  }\n  .success { color: #16a34a; }\n  .brand { color: #7c3aed; }\n\u003C\u002Fstyle>\n\u003Cp class='success'>\u003Cspan class='icon-mask' aria-hidden='true'>\u003C\u002Fspan>Green check from a CSS mask\u003C\u002Fp>\n\u003Cp class='brand'>\u003Cspan class='icon-mask' aria-hidden='true'>\u003C\u002Fspan>Purple check, same icon, only color changed\u003C\u002Fp>",{"id":766,"language":16,"code":767,"is_editable":746},398,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  .like-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 2px solid #e11d48; border-radius: 999px; background: transparent; color: #e11d48; font-size: 1rem; cursor: pointer; }\n  .like-btn svg { width: 1.3em; height: 1.3em; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.2s ease, transform 0.2s ease; }\n  .like-btn:hover svg { fill: currentColor; transform: scale(1.2); }\n  .like-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n  .spinner { width: 32px; height: 32px; fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; animation: spin 1s linear infinite; margin-left: 1rem; vertical-align: middle; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) {\n    .spinner { animation: none; }\n    .like-btn svg { transition: none; }\n  }\n\u003C\u002Fstyle>\n\u003Cbutton class='like-btn' type='button'>\n  \u003Csvg viewBox='0 0 24 24' aria-hidden='true' focusable='false'>\u003Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'\u002F>\u003C\u002Fsvg>\n  Like\n\u003C\u002Fbutton>\n\u003Csvg class='spinner' viewBox='0 0 24 24' role='img' aria-label='Loading'>\u003Cpath d='M12 2a10 10 0 0 1 10 10'\u002F>\u003C\u002Fsvg>",{"id":264,"slug":769,"title":770,"time_limit_seconds":771,"pass_percentage":329,"question_count":65},"icons-svg-icon-fonts-quiz","Icons (SVG & Icon Fonts) Quiz",600,[773,779],{"id":391,"title":774,"slug":775,"prompt":776,"starter_code":777,"expected_output":778,"language":16,"order_index":23},"Theme an Inline SVG with currentColor","theme-inline-svg-currentcolor","Replace the hard-coded stroke colour in the SVG with currentColor, set the icon size to 1.5em, and hide it from screen readers. Then make the link text and icon turn orange on hover by changing only the CSS color property of the link.","\u003Cstyle>\n  a { color: #2563eb; text-decoration: none; font-size: 20px; font-family: system-ui, sans-serif; }\n  \u002F* TODO: add a:hover and .icon styles *\u002F\n\u003C\u002Fstyle>\n\u003Ca href='#'>\n  \u003Csvg class='icon' viewBox='0 0 24 24' fill='none' stroke='#2563eb' stroke-width='2'>\n    \u003Ccircle cx='11' cy='11' r='8'\u002F>\u003Cline x1='21' y1='21' x2='16.65' y2='16.65'\u002F>\n  \u003C\u002Fsvg>\n  Search\n\u003C\u002Fa>","The search icon and the word Search are blue by default and both turn orange on hover, using one color change on the link. The SVG has aria-hidden set to true.",{"id":780,"title":781,"slug":782,"prompt":783,"starter_code":784,"expected_output":785,"language":16,"order_index":12},154,"Accessible Icon-Only Button","accessible-icon-only-button","Make the icon-only button accessible. Add an aria-label of Close, hide the SVG from assistive technology with aria-hidden and focusable set to false, give the button a visible :focus-visible outline, and make the button at least 44px by 44px.","\u003Cstyle>\n  button { border: 0; background: #e2e8f0; border-radius: 8px; cursor: pointer; }\n  \u002F* TODO: size and focus-visible styles *\u002F\n\u003C\u002Fstyle>\n\u003Cbutton type='button'>\n  \u003Csvg viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'>\n    \u003Cline x1='18' y1='6' x2='6' y2='18'\u002F>\u003Cline x1='6' y1='6' x2='18' y2='18'\u002F>\n  \u003C\u002Fsvg>\n\u003C\u002Fbutton>","A 44px by 44px button with a close icon, an aria-label of Close, an aria-hidden SVG, and a clearly visible focus outline when reached by keyboard.","2026-09-30T17:28:59+00:00",{"id":543,"slug":545,"title":544},{"id":555,"slug":557,"title":556}]