Lucide

Appearance

Global Styling ​

Adjusting icons can be done by using color, size and stroke width. 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 CSS property.
  • The size of the icons can be changed using width and height CSS properties.
  • The stroke width of the icons can be changed using the stroke-width CSS property.
css
.lucide {
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

Non-scaling strokes ​

For global non-scaling 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 non-scaling strokes for more info.

css
.lucide {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.lucide * {
  vector-effect: non-scaling-stroke;
}