Alt Text for Icons: When Empty Is Right (12 Examples)
By AutoBoost Team · 2026-10-29 · 5 min read
Eleven of the 12 icons we looked at sat next to visible text that already named them, so an empty alt would have been the right answer almost every time. Only 2 of those 11 had one. On 29 October 2026 we fetched the homepages of 58 well-known SaaS, hosting and agency sites and read the raw HTML. Seven blocked us or returned nothing, and one was a duplicate address, so we read 50 sites. From feature cards, service grids and menu cards we picked 12 real icons and wrote down the alt text exactly as it appears in the code.
Key takeaways
- 11 of the 12 icons sat next to visible text that already named the thing. Only 2 of those 11 had an empty alt (and a third was hidden from screen readers).
- 8 of 12 were faults. The most common was the word "icon" or "img" in the alt text, which 5 of them used.
- Length was never the problem. The longest alt was 31 characters, and that was a file name.
- One site had no alt attribute on all 12 of its service icons, and three sites used a file name or an ID instead of words.
What 12 icons said in the code
Each site name links to the exact page we fetched. Character counts are for the alt text only. Where it matters, we counted how often the same alt or file appeared on that page.
| Site | Alt text | Characters | Verdict |
|---|---|---|---|
| Webflow | empty (alt="" with role="presentation") on 4 feature icons beside sentences | 0 | Good |
| Xero UK | empty (alt="" with aria-hidden="true") on 8 feature icons beside link text | 0 | Good |
| FreshBooks | Open menu on the menu button icon | 9 | Good |
| FreshBooks | Chevron on the arrow beside "Products" (7 times, hidden with aria-hidden) | 7 | Fine |
| Mailchimp | chat icon beside the label "Help Center" | 9 | Fault: says "icon", describes the picture |
| Moz | Keyword Research beside the heading "Keyword Research" | 16 | Fault: repeats the nearby text |
| BigCommerce | icon on 23 icons (20 different files) | 4 | Fault: same alt on different images, says "icon" |
| seoClarity | seoClarity-Content-Product-icon | 31 | Fault: a file name |
| Brevo | Email img beside the heading "Email" | 9 | Fault: says "img", repeats the nearby text |
| HubSpot | 195140668528 on the Marketing Hub icon | 12 | Fault: a number, not a description |
| WebFX | icon truck on an icon beside the label "Case Study: Heavy Equipment" | 10 | Fault: reads like a file name, describes the shape |
| Screaming Frog | missing (no alt attribute on 12 service icons, each beside an h2 heading) | 0 | Fault: missing |
Ask what the icon does, not what it looks like
The three good examples agree on one thing: they ask about the icon's job.
If text sits beside the icon, the alt stays empty. Webflow and Xero both put alt="" on icons that sit beside a sentence or a link. A screen reader skips them and reads the text once. Xero also added aria-hidden="true", and Webflow added role="presentation". You do not need either, but the empty alt is the part that matters.
If the icon is the only thing on a button or link, name the action. FreshBooks uses Open menu. It says what happens when you press it, not what the three lines look like. That is two words and nine characters.
Words to leave out:
- "icon", "image", "img" or "graphic", which the screen reader supplies anyway.
- The shape or colour, such as "chat", "truck", "chevron" or "green arrow".
- The heading or label that sits next to the icon.
- A file name or an ID.
Eight faults, counted
One icon can carry more than one fault, so the numbers add up to more than 8.
- Says "icon" or "img": 5 of 12. Mailchimp, BigCommerce, seoClarity, Brevo and WebFX.
- Looks like a file name or an ID: 3 of 12. seoClarity, HubSpot and WebFX. The HubSpot alt is a bare number.
- Repeats the nearby text: 2 of 12. Moz and Brevo. A screen reader reads "Keyword Research" twice in a row.
- Describes the shape, not the meaning: 2 faults and 1 fine. Mailchimp ("chat"), WebFX ("truck") and the harmless, hidden Chevron on FreshBooks.
- Same alt on different images: 1 of 12. BigCommerce has
iconon 23 images that use 20 different files. - Missing altogether: 1 of 12. Screaming Frog has no alt attribute on any of its 12 service icons, and without one some screen readers read out the file name.
Moz is a useful oddity. It uses the same icon file for six cards (Keyword Research, Competitive Research, Link Research, Rank Tracking, Domain Overview and Site Crawl) and gives each a different alt. That is the reverse of BigCommerce, and it is still the wrong fix, because the heading is already there.
A decorative icon needs zero characters
Of the 12 icons, 3 had no alt text at all (two empty on purpose, one missing). The other 9 ranged from 4 to 31 characters, averaging about 12. Nobody wrote a paragraph. The trouble was the 4-character icon on 23 images and the 31-character file name. The one good alt text with words was 9 characters, so if an icon stands alone as a button or link, two or three words naming the action are enough.
Tip: look at the label before you write anything
Icons reach your media library with a blank alt, a file name or a copy of the title. Before approving any text for an icon, look at what sits beside it on the page. If there is a label, leave the alt empty. Logos and hero images raise related questions, covered in our guides to logo alt text and hero banner alt text, and map alt text deals with the pins that icons often resemble. For the wider job, see the main guide to bulk alt text in WordPress.
The AutoBoost SEO app writes missing alt text for the images in your posts in bulk, and you approve each suggestion before anything changes. It saves to both the post and the media library. The free AutoBoost SEO plugin is what links your WordPress site to the app.