Icons can make pages quicker to scan, but unclear icons slow understanding. Use them to support text, not replace it.
Good uses
- Feature or benefit lists.
- Contact options: phone, WhatsApp, email, location.
- Steps in a process.
- Navigation alongside text labels.
Rules
- Pair icons with text labels.
- Use one icon style: line or filled, same stroke width.
- Use familiar meanings: a phone for calls, a pin for location.
- Keep colours consistent with your brand; pull them from your logo with our palette tool.
Performance
Use inline SVG for the icons you need rather than large icon fonts. Read fonts and icons that do not slow pages.
Favicon
Your site’s small browser icon is also part of your brand; create one with our favicon generator.
Accessibility
Decorative icons should be hidden from screen readers; meaningful icon-only buttons need accessible labels.
Want the full picture? This article is part of Business websites: the complete guide, our in-depth guide with everything in one place.
