Alt text for logos and icons
Logos and icons are usually functional: they are links or buttons. Their alt text is the control's name, so it should describe the destination or action, not the drawing.
Rules for this kind of image
- Linked logo: the organisation name, or "Name home" for a header logo that goes to the home page.
- Partner and client logo walls: the organisation name for each logo.
- Icon next to visible text: hide the icon (alt="" or aria-hidden="true").
- Icon-only button: name the action ("Search", "Close menu").
6 examples, weak vs better
Company logo in site header, linked · Header
Weak
logoBetter Northwind home14 chars
Describes where the link goes.
Row of client logos · Customers section
Weak
client logo 1Better Contoso7 chars
Each logo is just the company name.
Twitter/X bird icon linked to profile · Footer
Weak
twitter iconBetter Northwind on X14 charspasses checks
Destination, not icon description.
Envelope icon beside the text "Email us" · Contact link
Weak
envelopeBetter alt="" (empty)
Visible text already names the link; hide the icon.
Hamburger icon button · Mobile menu toggle
Weak
three linesBetter Open menu9 chars
Icon buttons are named by action.
Logo on an About page · Brand history section
Weak
logoBetter Northwind logo: a compass rose inside a blue circle51 charspasses checks
Here the design itself is the topic, so describe it.
Have your own images? Draft alt text with the AI alt text generator, then edit it using these patterns.
Questions people ask
Should logo alt text include the word "logo"?
Usually not. For a linked logo the name or destination is enough. Include "logo" when the fact that it is a logo matters, such as a press kit or brand guidelines page.
How do I add alt text to an inline SVG?
Add role="img" and aria-label="…" to the <svg> (or a <title> as its first child). If it is decorative, add aria-hidden="true" instead.