Repo on GitHub<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"I wrote that using inline <svg> icons make for the best icon system. I still think that’s true. It’s the easiest possible way to drop an icon onto a page. No network request, perfectly styleable. But inlining code has some drawbacks, one of which is that it doesn’t take advantage of caching. You’re making the […]<\/p>\n","protected":false},"author":3,"featured_media":274042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Can we cache inline SVG? Why yes, yes we can.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[911,949,660],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/svg-xlink.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":168417,"url":"https:\/\/css-tricks.com\/icon-fonts-vs-svg\/","url_meta":{"origin":285846,"position":0},"title":"Inline SVG vs Icon Fonts [CAGEMATCH]","date":"April 22, 2014","format":false,"excerpt":"If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373111,"url":"https:\/\/css-tricks.com\/how-i-made-an-icon-system-out-of-css-custom-properties\/","url_meta":{"origin":285846,"position":1},"title":"How I Made an Icon System Out of CSS Custom Properties","date":"September 22, 2022","format":false,"excerpt":"SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255742,"url":"https:\/\/css-tricks.com\/pretty-good-svg-icon-system\/","url_meta":{"origin":285846,"position":2},"title":"A Pretty Good SVG Icon System","date":"June 23, 2017","format":false,"excerpt":"I've long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant. I've also often advocated for a SVG icon system that is based on s (an\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":285846,"position":3},"title":"svg-loader: A Different Way to Work With External SVG","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325632,"url":"https:\/\/css-tricks.com\/svgbox\/","url_meta":{"origin":285846,"position":4},"title":"SVGBOX","date":"November 12, 2020","format":false,"excerpt":"I've been saying for years that a pretty good icon system is just dropping in icons with inline