Global Styling

Adjusting icons can be done by color, size and stroke width.

By default, all icons have a color value of currentColor, a size value of 24px, and a stroke width of 2. Styling icons individually can be done by passing props to the icon component.

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.

.lucide {
  /* Change this! */
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

.app {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox

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 for more info.

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

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

.app {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox