Accessible Icons and Symbols
Icons are everywhere, so, it's better to learn how to handle them from an accessibility point of view.
Icons are like the spices in your website design recipe -- they add flavor and make everything pop! They're everywhere on the internet, from social media buttons to navigation menus, and they're super convenient for users. Icons are the ultimate shortcut to communication, allowing users to quickly understand and navigate your website without having to read a novel. But, let's be honest, we often don't give them the credit and attention they deserve: in this way, they can quickly turn into a nightmare for accessibility. So, sprinkle those icons around like confetti, but don't forget to treat them accessibly.
Using <i> or <span> Element
Probably the most widely used tag for displaying icons is <i>. You can find this in products like Bootstrap or Fontawsome, and following these couple of big names, a lot of other services and platforms have begun using <i>: how to blame them? It's short, easy to remember and after all, "i" stands for "icon", right?
WRONG! <i> stands for "italic", or, as stated in its definition, "defines a part of text in an alternate voice or mood. The content inside is typically displayed in italics". Usually, font-icons such as those provided by Fontawesome, Icomoon, Phosphor and friends, apply the icon glyph (the "character") using an :after or :before pseudo-element to a target element with a specific class. This means that in general (you should check, however) using it with an <i> element or with another is perfectly fine and they are obviously using it tor presentational purposes only.
Since you're basically free to use whatever element you like, if you should create a "standalone icon", consider using a <span> instead: a <span> "is a generic inline container for phrasing content, which does not inherently represent anything". Perfect for an icon that only has graphic purposes.
If you need a "clickable" icon, you can attribute the "icon class" directly to the button or insert the <span> inside it.
Make your icons talk (or not)
Another issue that I often encounter is that icons are often declared with tags without any content. Well, in reality, there are only a few tags that are allowed to be empty. You can recognize them by the "/" at the end: by definition "empty tags" are those like <br />, <hr />, <img />, <meta />, <input /> and <link />. For this, from a semantic point of view, using a <span>, this should not be empty. You could probably better add a description of the icon inside if you're not planning to attach your icon to a meaningful element.
This inevitably leads to a text that will be read by the screen reader. If you want to avoid this (yep, there are cases when you don't want something to be presented to assistive technologies, mainly because it's purely decorative), you could go with aria-hidden="true".
In case your icon is also a clickable button, when using icon-fonts you could try implementing it as a class of the button itself. You will have, however, to explain what kind of action your button will perform: aria-label, aria-labelledby, a "visually-hidden" content... you have plenty of options (check labeling and visually-hidden articles). A similar approach for links: if you want a better explanation of when to use a button or a link you can read this specific article.
Icon Fonts vs. SVG Icons: Accessibility Considerations
While there are lots of implications to consider in deciding which method to use, From an accessibility standpoint, there's no significant difference between using icon fonts and SVG icons, as long as you follow the best practices for images. Both methods can be made accessible using the appropriate ARIA attributes.
Just make sure to keep your icons accessible and semantically correct, no matter which method you choose!