Give small symbols a clear meaning
Icons work best when they reinforce a familiar action or help scan a short list. A symbol that looks obvious to its designer may be ambiguous to a visitor, especially in a specialized tool. Use a visible text label when the meaning is not universally recognizable.
Choose an icon with a consistent stroke and size, then inspect it at the size it will actually appear. Inline SVG scales cleanly, but very small details can still become difficult to read. Decorative icons beside clear text generally do not need a second accessible name.
For an icon-only button, place the accessible name on the button. The icon itself can be hidden from assistive technology so that the action is announced once. Respect any license that accompanies a third-party icon set.
Style the control around an icon →