✒️ Lucide React Cheat Sheet

✒️ Lucide React Cheat Sheet #

Lucide is a beautiful and consistent icon toolkit. lucide-react provides React components for all Lucide icons, making them easy to use in your projects.

🚀 Installation #

Install the lucide-react package using your preferred package manager:

npm install lucide-react

✨ Basic Usage #

Each icon can be imported as a separate React component. This allows for tree-shaking, so only the icons you use are included in your final bundle.

import { Home, Settings } from 'lucide-react';

const MyComponent = () => {
  return (
    <div>
      <Home />
      <p>Welcome to the dashboard!</p>
      <Settings />
    </div>
  );
};

🎨 Customization #

You can customize the icons by passing props to the component.

Props #

  • size: (number) The width and height of the icon in pixels.
  • color: (string) The color of the icon’s stroke.
  • strokeWidth: (number) The width of the icon’s stroke.
  • absoluteStrokeWidth: (boolean) Whether to use an absolute stroke width, ignoring the size prop.

Example # 

import { Camera } from 'lucide-react';

const App = () => {
  return <Camera color="red" size={48} strokeWidth={2.5} />;
};

🔄 Dynamic Icons #

Lucide React provides a DynamicIcon component that can be used to render icons dynamically by name. This is useful when the icon name is stored in a database or comes from a CMS.

⚠️ Warning: Using DynamicIcon will import all icons, which can increase your bundle size. It’s recommended to use direct imports for static use cases.

Usage # 

import { DynamicIcon } from 'lucide-react/dynamic';

const App = ({ iconName }) => {
  return <DynamicIcon name={iconName} color="blue" size={32} />;
};

💡 Tips #

  • Tree-shaking: Always prefer direct imports to keep your bundle size small.
  • Accessibility: Lucide icons are SVGs and can be made more accessible by providing aria-label or title props.

🌟 Popular Icons #

Here is a list of some of the most commonly used icons, categorized for convenience:

General #

  • home: A house icon for home or main page links.
  • user: A person icon for user profiles or accounts.
  • settings: A gear icon for settings or configuration.
  • search: A magnifying glass for search functionality.
  • menu: A hamburger menu icon for navigation.
  • x: A cross icon for closing modals or dismissing notifications.
  • check: A checkmark for success or completion.
  • chevron-left, chevron-right, chevron-up, chevron-down: Arrow icons for navigation and accordions.
  • arrow-left, arrow-right: Simple arrows for back/forward actions.

Actions #

  • plus: A plus sign for adding new items.
  • minus: A minus sign for removing items.
  • edit: A pencil icon for editing content.
  • trash-2: A trash can for deleting items.
  • copy: A copy icon for duplicating content or copying to clipboard.
  • save: A floppy disk icon for saving changes.
  • upload: An arrow pointing up into a cloud for uploads.
  • download: An arrow pointing down from a cloud for downloads.

Communication #

  • mail: An envelope icon for email.
  • phone: A telephone icon for contact numbers.
  • message-square: A speech bubble for comments or messages.

Social #

  • thumbs-up: A thumbs-up icon for liking or approving.
  • thumbs-down: A thumbs-down icon for disliking.
  • share-2: A sharing icon for social media.
  • github, twitter, facebook: Brand icons.

Feedback & Status #

  • check-circle: A circled checkmark for success states.
  • alert-circle: An exclamation mark in a circle for warnings.
  • x-circle: A circled ‘x’ for error states.
  • info: An ‘i’ in a circle for informational messages.
  • heart: A heart icon for favorites or likes.
  • star: A star icon for ratings or bookmarks.
  • award: An award ribbon for achievements.
  • smile: A smiling face for positive feedback.