Lucide keeps icon styling close to the icon itself. Start with size and stroke, then add transforms, alignment, or interaction only when the surrounding design needs them.
Set the basic appearance
Size controls the icon dimensions, while Color controls the SVG stroke color. Stroke Width changes the visual weight. Linecap and Linejoin control how line ends and corners are drawn.
Use a consistent size and stroke width for icons that serve the same purpose. A small difference in weight is often more noticeable than a small difference in color.
Rotate or flip an icon
Use Rotate for a deliberate angle. Flip X mirrors the icon horizontally and Flip Y mirrors it vertically. Check recognizable or directional icons after flipping them so their meaning remains correct.
Align icons with nearby text
Horizontal Align positions a standalone icon in its available space. For inline icons, use Nudge Y to move the icon slightly up or down until it sits naturally on the text line. Keep the adjustment small and test it with the actual font and line height.
Add hover behavior and links
Set a Hover Color when the icon needs an interactive state. Enable Make Icon a Link when the icon itself should open a destination. Verify both the normal and hover state, and make sure the destination and surrounding text explain the action.
Use Lucide icons as list bullets
Code Loader mode can place icons in list content. Use Bullet Gap to adjust the space between the custom icon and the list text. Test wrapped list items as well as short single-line items so the icon remains aligned.
Build a consistent icon system
Choose a small set of sizes and stroke widths for interface actions, feature cards, status messages, and decorative details. Use color and transforms for meaning only when that meaning is also clear from text or context. The Lucide demo includes examples for size, stroke width, rotate, flip, nudge, hover, links, and list bullets.
Related guides
See Getting started with Lucide, Using inline Lucide icons and the Code Helper, and Troubleshooting Lucide icons and accessibility.