Icons are fundamental to many designs, but they often don’t look good on their own. They usually need to be paired with some text of approximately the same size — for example, in a portal. The shield makes it possible for icons to look good on their own by giving them a muted circular background — although this behavior, like everything else in a17t, can be customized.
Responsiveness — What looks proportional on desktop might not look right on mobile, and vice versa. As always, be sure to test your design on all screen sizes to ensure a reliable experience.
Padding — By default, shields’ padding is defined in rems. If you’re using an icon that’s larger than the root em size, you’ll want to manually adjust the padding using the --shield-padding-x and --shield-padding-y variables.
Icons — For the best experience, a shields’ sole element should be an icon element. If you’re using a shield in another context, though, don’t feel bound by this recommendation.
Icons have full tone and priority support, although using the !normal (default) priority is recommended.
Normal Priority (Recommended)
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
sets background color
sets icon color
sets the x-padding
sets the y-padding
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g., --color-content) and global
variables (e.g., --family-primary) are defined here.