Files
KarsaandEric Fennis e4be16acd5 feat(docs): added "How to use Lucide icons" section to resources (#4829)
* fix(docs): replace missing LucideIcon icon names in guides

* feat(docs): add How to use Lucide icons section to resources

* feat(docs): update accessibility guide links

* fix(docs): fix dead link in guide.md

* fix(docs): fix color in example image

* fix(docs): fix overlay color in example images

* fix(how-to): added caution guidance type & rework some guidance rules relating to compact interfaces

* fix(how-to): replaced caution items, what the heck, when did I reorder these 😅

* fix(how-to): fix colors

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2026-09-10 16:07:18 +02:00

1.5 KiB

title, description
title description
How to use Lucide icons Learn how to use icons in an accessible, user-friendly way
<script setup> import OverviewLink from '../.vitepress/theme/components/base/OverviewLink.vue'; import OverviewLinkGrid from '../.vitepress/theme/components/base/OverviewLinkGrid.vue'; import { resourcesSidebar } from '../.vitepress/sidebar/resources.ts'; </script>

How to use Lucide icons

Icons can make an interface easier to scan, but they only help when their meaning is clear. These guides explain how to choose icons that support the interface, when to pair icons with text, and when the best icon to use is no icon at all.

Use the accessibility guide to make icons readable, understandable, and usable with assistive technology. Use the icon guide to decide when icons belong in an interface and how to pick symbols people are likely to recognize.

What this guide covers

Further resources