Skip to content

Switch site icons to Lucide #709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bryantgillespie merged 1 commit into from
Jun 2, 2026
Merged

Switch site icons to Lucide #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default defineAppConfig({
{
label: 'Security',
to: '/guides/security/best-practices',
icon: 'material-symbols:verified-user-outline',
icon: 'i-lucide-shield-check',
},
{
label: 'AI',
Expand All @@ -154,12 +154,12 @@ export default defineAppConfig({
{
label: 'Cloud',
to: '/cloud/getting-started/introduction',
icon: 'material-symbols:cloud-outline',
icon: 'i-lucide-cloud',
},
{
label: 'Self-Hosting',
to: '/self-hosting/overview',
icon: 'material-symbols:dns-outline',
icon: 'i-lucide-server',
},
],
},
Expand All @@ -173,22 +173,22 @@ export default defineAppConfig({
{
label: 'Frameworks',
to: '/frameworks',
icon: 'material-symbols:data-object',
icon: 'i-lucide-braces',
},
{
label: 'Tutorials',
to: '/tutorials',
icon: 'material-symbols:article-outline',
icon: 'i-lucide-file-text',
},
{
label: 'Community',
to: '/community/overview/welcome',
icon: 'material-symbols:volunteer-activism-outline',
icon: 'i-lucide-heart-handshake',
},
{
label: 'Releases',
to: '/releases',
icon: 'material-symbols:menu-book-outline',
icon: 'i-lucide-book-open',
},
],
},
Expand Down Expand Up @@ -223,7 +223,7 @@ export default defineAppConfig({
// Has "edit page" dynamically added in the first position in DocsTocAuthors.vue
links: [
{
icon: 'material-symbols:star-outline',
icon: 'i-lucide-star',
label: 'Star on GitHub',
to: 'https://github.com/directus/directus',
},
Expand All @@ -250,22 +250,22 @@ export default defineAppConfig({
preFooter: {
links: [
{
icon: 'ic:baseline-support',
icon: 'i-lucide-headset',
label: 'Need help? Contact Support.',
to: 'https://directus.com/support',
},
{
icon: 'ic:baseline-people-alt',
icon: 'i-lucide-users',
label: 'Join our Community Platform.',
to: 'https://community.directus.io',
},
{
icon: 'ic:baseline-rocket-launch',
icon: 'i-lucide-rocket',
label: 'Check out our product changelog.',
to: '/releases/changelog',
},
{
icon: 'ic:outline-help-outline',
icon: 'i-lucide-circle-question-mark',
label: 'Need a license? Contact Sales.',
to: 'https://directus.com/contact',
},
Expand Down
10 changes: 5 additions & 5 deletions app/components/CopyDocButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ const items = computed<CopyMenuItem[][]>(() => [
[
{
label: isMarkdownLinkCopied.value ? 'Copied Markdown link!' : 'Copy Markdown link',
icon: 'material-symbols:link',
icon: 'i-lucide-link',
onSelect: () => copyMarkdownLink(),
},
{
label: 'View as Markdown',
icon: 'material-symbols:markdown-outline',
icon: 'i-lucide-file-code',
external: true,
onSelect: () => openExternal(markdownUrl.value),
},
Expand All @@ -96,7 +96,7 @@ const items = computed<CopyMenuItem[][]>(() => [
{
label: isMcpUrlCopied.value ? 'Copied MCP URL!' : 'Copy MCP server URL',
description: 'Use with any MCP-compatible client',
icon: 'material-symbols:link',
icon: 'i-lucide-link',
onSelect: () => copyMcpUrl(),
},
...MCP_IDES.map(ide => ({
Expand All @@ -115,7 +115,7 @@ const items = computed<CopyMenuItem[][]>(() => [
color="neutral"
size="sm"
variant="soft"
leading-icon="material-symbols:content-copy-outline"
leading-icon="i-lucide-copy"
:label="isCopied ? 'Copied!' : 'Copy page'"
@click="copyPage"
/>
Expand All @@ -128,7 +128,7 @@ const items = computed<CopyMenuItem[][]>(() => [
size="sm"
variant="soft"
color="neutral"
icon="material-symbols:keyboard-arrow-down"
icon="i-lucide-chevron-down"
/>
<template #item="{ item }">
<div class="flex gap-2 text-left">
Expand Down
4 changes: 2 additions & 2 deletions app/components/DocsBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ useHead(computed(() => ({
/>
<Icon
class="hidden md:block transform duration-150 ease-out ml-1 group-hover:translate-x-1 size-5"
name="material-symbols:arrow-forward"
name="i-lucide-arrow-right"
/>
</NuxtLink>

Expand All @@ -51,7 +51,7 @@ useHead(computed(() => ({
@click="dismiss(banner.id)"
>
<Icon
name="material-symbols:close"
name="i-lucide-x"
class="size-5"
/>
</button>
Expand Down
30 changes: 15 additions & 15 deletions app/components/DocsSearchPalette.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const paletteGroups = computed(() => {
id: 'header:recents',
slot: 'group-header',
disabled: true,
headerIcon: 'i-ph-clock-counter-clockwise',
headerIcon: 'i-lucide-history',
headerIconClass: 'size-3.5 opacity-60',
headerLabel: 'Recently viewed',
headerCount: visibleRecents.length,
Expand All @@ -72,7 +72,7 @@ const paletteGroups = computed(() => {
label: r.title,
path: r.path,
visitedAt: r.visitedAt,
icon: section?.icon ?? 'i-ph-file-text',
icon: section?.icon ?? 'i-lucide-file-text',
sectionLabel: section?.label ?? '',
onSelect: () => {
void navigateToResult(r.path);
Expand All @@ -93,7 +93,7 @@ const paletteGroups = computed(() => {
id: 'header:favorites',
slot: 'group-header',
disabled: true,
headerIcon: 'i-ph-star-fill',
headerIcon: 'i-lucide-star',
headerIconClass: 'size-3.5 text-warning',
headerLabel: 'Favorites',
headerCount: visibleFavorites.length,
Expand All @@ -106,7 +106,7 @@ const paletteGroups = computed(() => {
to: f.path,
label: f.title,
path: f.path,
icon: section?.icon ?? 'i-ph-file-text',
icon: section?.icon ?? 'i-lucide-file-text',
sectionLabel: section?.label ?? '',
onSelect: () => {
void navigateToResult(f.path);
Expand All @@ -126,7 +126,7 @@ const paletteGroups = computed(() => {
id: 'header:jump',
slot: 'group-header',
disabled: true,
headerIcon: 'i-ph-compass',
headerIcon: 'i-lucide-compass',
headerIconClass: 'size-3.5 opacity-60',
headerLabel: 'Jump to a section',
muted: true,
Expand Down Expand Up @@ -174,7 +174,7 @@ const visibleSections = computed(() => {
});

const sectionIcon = (id: DocsSectionId) =>
docsSections.find(s => s.id === id)?.icon ?? 'i-ph-file-text';
docsSections.find(s => s.id === id)?.icon ?? 'i-lucide-file-text';

const clientOrigin = () => import.meta.client ? window.location.origin : 'http://localhost';
const parseResultUrl = (url: string) => new URL(url, clientOrigin());
Expand Down Expand Up @@ -219,9 +219,9 @@ function handleClear() {
}

const suggestions = [
{ label: 'API Reference', to: '/api', icon: 'i-ph-code' },
{ label: 'Guides', to: '/guides/data-model/collections', icon: 'i-ph-book-open' },
{ label: 'Tutorials', to: '/tutorials', icon: 'i-ph-article' },
{ label: 'API Reference', to: '/api', icon: 'i-lucide-code' },
{ label: 'Guides', to: '/guides/data-model/collections', icon: 'i-lucide-book-open' },
{ label: 'Tutorials', to: '/tutorials', icon: 'i-lucide-file-text' },
];

// Apply scroll shadow to the palette's scrollable viewport.
Expand Down Expand Up @@ -457,7 +457,7 @@ onUnmounted(() => {
/>
<UIcon
v-else
name="i-ph-arrow-right"
name="i-lucide-arrow-right"
class="size-3.5 text-primary shrink-0 self-center opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0"
/>
</div>
Expand Down Expand Up @@ -488,7 +488,7 @@ onUnmounted(() => {
{{ relativeTime(item.visitedAt) }}
</span>
<UIcon
name="i-ph-arrow-right"
name="i-lucide-arrow-right"
class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
/>
</template>
Expand All @@ -512,7 +512,7 @@ onUnmounted(() => {
class="font-mono uppercase tracking-wider"
/>
<UIcon
name="i-ph-arrow-right"
name="i-lucide-arrow-right"
class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
/>
</template>
Expand All @@ -528,7 +528,7 @@ onUnmounted(() => {
</template>
<template #section-trailing>
<UIcon
name="i-ph-arrow-right"
name="i-lucide-arrow-right"
class="size-3.5 text-dimmed opacity-0 -translate-x-1 transition-all duration-150 group-data-[highlighted]:opacity-100 group-data-[highlighted]:translate-x-0 group-data-[highlighted]:text-primary"
/>
</template>
Expand Down Expand Up @@ -582,7 +582,7 @@ onUnmounted(() => {
<div class="flex items-start gap-3">
<div class="size-7 rounded-lg flex items-center justify-center text-muted bg-elevated shrink-0">
<UIcon
name="i-ph-keyboard"
name="i-lucide-keyboard"
class="size-4"
/>
</div>
Expand All @@ -605,7 +605,7 @@ onUnmounted(() => {
<div class="flex items-start gap-3">
<div class="size-7 rounded-lg flex items-center justify-center text-muted bg-elevated shrink-0">
<UIcon
name="i-ph-magnifying-glass"
name="i-lucide-search"
class="size-4"
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/components/DocsSearchPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const navigation = inject<Ref<ContentNavigationItem[]> | null>('navigation', nul
const { app } = useRuntimeConfig();

const sectionIcon = (id: DocsSearchItem['section']) =>
docsSections.find(section => section.id === id)?.icon ?? 'i-ph-file-text';
docsSections.find(section => section.id === id)?.icon ?? 'i-lucide-file-text';

const previewDisplayPath = computed(() => {
const to = props.result?.to;
Expand Down Expand Up @@ -118,7 +118,7 @@ const previewBreadcrumb = computed(() => {
>
<div class="palette-empty-icon">
<UIcon
name="i-ph-magnifying-glass"
name="i-lucide-search"
class="size-4"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/DocsSearchTrigger.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ defineShortcuts({

<template>
<UButton
icon="heroicons:magnifying-glass-20-solid"
icon="i-lucide-search"
variant="subtle"
color="neutral"
:aria-label="label"
Expand Down
2 changes: 1 addition & 1 deletion app/components/DocsToc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const { style: scrollShadowStyle } = useScrollShadow(tocEl, { size: 48 });
const communityLinks = computed(() => {
return [
{
icon: 'material-symbols:edit-document-outline',
icon: 'i-lucide-file-pen-line',
label: 'Edit this page',
to: `https://github.com/directus/docs/edit/main/${props.file}`,
},
Expand Down
6 changes: 3 additions & 3 deletions app/components/DocsTocFeedback.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ const savedValue = ref<'good' | 'bad' | null>(null);
const buttonLoading = ref(false);

const options = [
{ value: 'good', icon: 'material-symbols:thumb-up-outline' },
{ value: 'bad', icon: 'material-symbols:thumb-down-outline' },
{ value: 'good', icon: 'i-lucide-thumbs-up' },
{ value: 'bad', icon: 'i-lucide-thumbs-down' },
] as const;

const handleFeedback = (feedback: 'good' | 'bad') => {
Expand All @@ -31,7 +31,7 @@ const handleFeedback = (feedback: 'good' | 'bad') => {
<UButton
v-for="option in options"
:key="option.value"
:icon="savedValue === option.value ? 'material-symbols:check' : option.icon"
:icon="savedValue === option.value ? 'i-lucide-check' : option.icon"
square
size="xl"
variant="ghost"
Expand Down
2 changes: 1 addition & 1 deletion app/components/FrameworkLinkList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ defineProps<{
</span>
</span>
<Icon
name="material-symbols:arrow-forward"
name="i-lucide-arrow-right"
class="mt-1 size-4 shrink-0 text-muted transition group-hover:translate-x-0.5 group-hover:text-primary"
/>
</NuxtLink>
Expand Down
6 changes: 3 additions & 3 deletions app/components/HomeHero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function openSearch() {
@click="openSearch"
>
<UIcon
name="heroicons:magnifying-glass-20-solid"
name="i-lucide-search"
class="size-4 shrink-0 text-white/60"
/>
<span class="flex-1">Search the docs...</span>
Expand All @@ -46,14 +46,14 @@ function openSearch() {
<div class="mt-6 flex flex-wrap gap-2.5">
<UButton
label="Get Started"
trailing-icon="i-ph-arrow-right"
trailing-icon="i-lucide-arrow-right"
color="primary"
size="lg"
to="/getting-started/overview"
/>
<UButton
label="What is Directus?"
trailing-icon="i-ph-play"
trailing-icon="i-lucide-play"
color="neutral"
variant="subtle"
size="lg"
Expand Down
Loading
Loading