Classify the icon’s job
An arrow beside Read project repeats a meaning already provided by the text. A standalone magnifying-glass button, however, may be the only visible clue that it opens search. These cases need different treatment. Decide whether the icon communicates information, supports a text label, or acts as the visual representation of a control.
Name the control instead of the drawing
For an icon-only button, a clear aria-label such as Open navigation can name the button while the SVG itself is hidden from assistive technology. The visible control still needs a reasonable target size and focus state. A tooltip may help sighted readers, but it should not be the only source of the accessible name.
Keep decorative SVGs quiet
An SVG that merely decorates a text link can use aria-hidden="true" so it does not add an extra announcement. Avoid placing important text inside that hidden subtree. Review the final link name: it should read naturally once, rather than saying the title, arrow icon, right arrow and a repeated tooltip label.
Describe informative standalone graphics
When an SVG is itself an informative graphic, provide an accessible name, often through a title element referenced by aria-labelledby. More complex graphics may also need a description or nearby explanation. Use unique ids for repeated inline graphics; duplicated title ids can associate a graphic with the wrong instance when several cards appear together.
Preserve the visual language
Use currentColor when an icon should follow its surrounding text color, and verify its contrast against each theme surface. Thin strokes can disappear at small sizes even when the color pair looks promising. Icons must not be the sole indicator of an error, a required field or an important state change.
Check output and interaction together
Inspect the accessibility tree for a text button, an icon-only toggle and a standalone chart. Navigate with a keyboard and confirm the action is understandable before activation. Resize the icons and test a forced-colors environment where available. A compact SVG file is only one part of a usable icon system.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.