{"id":704,"date":"2024-02-02T12:30:22","date_gmt":"2024-02-02T18:30:22","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=704"},"modified":"2024-02-02T12:31:34","modified_gmt":"2024-02-02T18:31:34","slug":"mask-your-icons","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/mask-your-icons\/","title":{"rendered":"Making your SVG icons CSS masks instead of inline HTML or backgrounds has some benefits"},"content":{"rendered":"\n<p>I&#8217;m a fan of just chucking SVG icons right into the HTML where you need them:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"icon icon-eye-dropper\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"16\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"16\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 16 16\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"...\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span> <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"...\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjzvGaM\" src=\"\/\/codepen.io\/anon\/embed\/JjzvGaM?height=250&amp;theme-id=47434&amp;slug-hash=JjzvGaM&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjzvGaM\" title=\"CodePen Embed JjzvGaM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But, putting your SVG icons in CSS can be advantageous too. <a href=\"https:\/\/yoksel.github.io\/url-encoder\/\">This converter<\/a> is handy. For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.icon-menu<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">1rem<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'data:image\/svg+xml;utf8,&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"&gt;&lt;path d=\"...\"\/&gt;&lt;\/svg&gt;'<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOEzMPm\" src=\"\/\/codepen.io\/anon\/embed\/gOEzMPm?height=250&amp;theme-id=47434&amp;slug-hash=gOEzMPm&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOEzMPm\" title=\"CodePen Embed gOEzMPm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You give up some styling control there \u2014 the icon is just going to look how that SVG looks, barring stuff like <code>filter<\/code> and <code>background-blend-mode<\/code>. <\/p>\n\n\n\n<p>The advantage here is that your icons are now cached within your CSS and shared across everywhere on your site that is using that CSS file. If you have the (rare) issue of your DOM being too big, this would help.<\/p>\n\n\n\n<p>A minor alteration to this is to use a <code>mask<\/code> <em>instead<\/em> of <code>background-image<\/code> to show the icon. This actually frees up the <code>background<\/code> to use to color it. Still getting the caching, just a bit easier to style now.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBvYNZB\" src=\"\/\/codepen.io\/anon\/embed\/qBvYNZB?height=250&amp;theme-id=47434&amp;slug-hash=qBvYNZB&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBvYNZB\" title=\"CodePen Embed qBvYNZB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>David Bushell <a href=\"https:\/\/dbushell.com\/2024\/01\/19\/svg-icons-with-css-masks\/\">just blogged about this<\/a> and says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This is technique perfect for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Button icons<\/li>\n\n\n\n<li>List bullet points<\/li>\n\n\n\n<li>Custom checkbox icons<\/li>\n<\/ul>\n\n\n\n<p>Especically when the icon changes colour depending on interactive state, or light and dark theming, for example.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m a fan of just chucking SVG icons right into the HTML where you need them: This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too. This converter is handy. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":713,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,95,91],"class_list":["post-704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-icons","tag-svg"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/02\/mask-icon-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions\/716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/713"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}