diff --git a/docs/guide/advanced/accessibility.md b/docs/guide/advanced/accessibility.md
index 986e391e2..131928c2a 100644
--- a/docs/guide/advanced/accessibility.md
+++ b/docs/guide/advanced/accessibility.md
@@ -139,22 +139,22 @@ contained icon.
```tsx
// Don't do this
// Don't do this either
// This works but might not be the best solution, see below
// Do this instead
```
@@ -167,6 +167,7 @@ Although you could provide accessible labels to your elements via the `aria-labe
generally recommend avoiding this and instead suggest that you use your chosen CSS framework's "
visually hidden" utility whenever possible. You can
[read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).
+
### Example - Radix UI
Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
@@ -179,6 +180,7 @@ import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
```
+
### Example - Bootstrap
```html
diff --git a/docs/guide/advanced/aliased-names.md b/docs/guide/advanced/aliased-names.md
index 148af8faf..67ace7ec7 100644
--- a/docs/guide/advanced/aliased-names.md
+++ b/docs/guide/advanced/aliased-names.md
@@ -7,9 +7,9 @@ Beside aliases names lucide also includes prefixed and suffixed names to use wit
```tsx
// These are all the same icon
import {
- Home,
- HomeIcon,
- LucideHome,
+ House,
+ HouseIcon,
+ LucideHouse,
} from "lucide-react";
```
diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md
index 1b1d4c776..ec79eb40d 100644
--- a/docs/guide/packages/lucide-angular.md
+++ b/docs/guide/packages/lucide-angular.md
@@ -31,11 +31,11 @@ bun add lucide-angular
In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
```js
-import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
+import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';
@NgModule({
imports: [
- LucideAngularModule.pick({File, Home, Menu, UserCheck})
+ LucideAngularModule.pick({File, House, Menu, UserCheck})
]
})
export class AppModule { }
@@ -64,7 +64,7 @@ Within your templates you may now use one of the following component tags to ins
```html
-
+
```
@@ -88,7 +88,7 @@ You can pass additional props to adjust the icon appearance.
| `absoluteStrokeWidth` | *boolean* | false |
```html
-
+
```
### Global configuration
@@ -151,11 +151,11 @@ They can be used in the same way as the official icons.
```js
import { LucideAngularModule } from 'lucide-angular';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
@NgModule({
imports: [
- LucideAngularModule.pick({ burger })
+ LucideAngularModule.pick({ coconut })
]
})
export class AppModule { }
diff --git a/docs/guide/packages/lucide-astro.md b/docs/guide/packages/lucide-astro.md
index d44def3d8..dc5e2bdc4 100644
--- a/docs/guide/packages/lucide-astro.md
+++ b/docs/guide/packages/lucide-astro.md
@@ -93,7 +93,7 @@ The package includes type definitions for all icons. This is useful if you want
```astro
---
-import { Home, Library, Cog, type Icon as IconType } from '@lucide/astro';
+import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';
type MenuItem = {
name: string;
@@ -105,7 +105,7 @@ const menuItems: MenuItem[] = [
{
name: 'Home',
href: '/',
- icon: Home,
+ icon: House,
},
{
name: 'Blog',
diff --git a/docs/guide/packages/lucide-preact.md b/docs/guide/packages/lucide-preact.md
index ea5d54a91..4247c6abf 100644
--- a/docs/guide/packages/lucide-preact.md
+++ b/docs/guide/packages/lucide-preact.md
@@ -84,10 +84,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
```jsx
import { Icon } from 'lucide-preact';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
const App = () => (
-
+
);
```
@@ -119,7 +119,7 @@ export default Icon;
import Icon from './Icon';
const App = () => {
- return ;
+ return ;
};
export default App;
diff --git a/docs/guide/packages/lucide-react-native.md b/docs/guide/packages/lucide-react-native.md
index b3a5d8e80..374090f7d 100644
--- a/docs/guide/packages/lucide-react-native.md
+++ b/docs/guide/packages/lucide-react-native.md
@@ -78,10 +78,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
```jsx
import { Icon } from 'lucide-react-native';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
const App = () => (
-
+
);
```
@@ -113,7 +113,7 @@ export default Icon;
import Icon from './Icon';
const App = () => {
- return ;
+ return ;
};
export default App;
diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md
index 45e7c10de..7794acdbf 100644
--- a/docs/guide/packages/lucide-react.md
+++ b/docs/guide/packages/lucide-react.md
@@ -78,10 +78,10 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
```jsx
import { Icon } from 'lucide-react';
-import { burger } from '@lucide/lab';
+import { coconut } from '@lucide/lab';
const App = () => (
-
+
);
```
diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md
index 16a592504..c56d2851c 100644
--- a/docs/guide/packages/lucide-solid.md
+++ b/docs/guide/packages/lucide-solid.md
@@ -91,7 +91,7 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
```jsx
import { Icon } from 'lucide-solid';
-import { burger, sausage } from '@lucide/lab';
+import { sausage } from '@lucide/lab';
const App = () => (
diff --git a/docs/guide/packages/lucide-static.md b/docs/guide/packages/lucide-static.md
index 5e89ba87f..09f87abb5 100644
--- a/docs/guide/packages/lucide-static.md
+++ b/docs/guide/packages/lucide-static.md
@@ -136,7 +136,7 @@ and update the SVG as follows
class="lucide-icon"
>