mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
45 lines
1.6 KiB
Markdown
45 lines
1.6 KiB
Markdown
|
---
|
||
|
|
title: Global Styling - Astro
|
||
|
|
description: Learn how to apply global styling to Lucide icons in your Astro applications using CSS.
|
||
|
|
---
|
||
|
|
|
||
|
|
# Global Styling
|
||
|
|
|
||
|
|
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
|
||
|
|
To style all icons globally you can use CSS.
|
||
|
|
|
||
|
|
## Style by using CSS
|
||
|
|
|
||
|
|
Styling icons is easy to accomplish using CSS.
|
||
|
|
|
||
|
|
Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.
|
||
|
|
|
||
|
|
- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
|
||
|
|
- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
|
||
|
|
- The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.lucide {
|
||
|
|
color: #ffadff;
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
stroke-width: 1px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Absolute stroke width
|
||
|
|
|
||
|
|
For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more info.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.lucide {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
stroke-width: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lucide * {
|
||
|
|
vector-effect: non-scaling-stroke;
|
||
|
|
}
|
||
|
|
```
|