[](https://www.npmjs.com/package/devicons-react-kit) [](https://opensource.org/lice
npm install devicons-react-kitbash
npm install devicons-react-kit
`
yarn
`bash
yarn add devicons-react-kit
`
pnpm
`bash
pnpm add devicons-react-kit
`
usage
Using the icons is simple. Just import the component for the icon you want to use.
`jsx
import React from 'react';
import { HomeIcon, GithubIcon } from 'devicons-react-kit';
function MyComponent() {
return (
);
}
export default MyComponent;
`
🎨 Customization
You can customize the appearance of the icons using props.
* size: Sets the width and height of the icon (default: 24).
* color: Sets the stroke or fill color (default: currentColor).
* strokeWidth: Sets the stroke width for non-filled icons (default: 2).
Any other standard SVG props (like className, onClick, etc.) will be passed directly to the SVG element.
$3
`jsx
import { CodeIcon } from 'devicons-react-kit';
function CustomIconExample() {
return (
size={48}
color="#f97316"
strokeWidth={1.5}
className="hover:opacity-80"
/>
);
}
`
🌐 Icon Browser
To see the full list of available icons and search for the one you need, check out the Official Icon Browser.
(Note: If you are running this project locally, the browser is available at http://localhost:5173)
🤝 Contributing
Contributions are welcome! If you have ideas for new icons or improvements, please feel free to open an issue or submit a pull request.
To get started with local development:
1. Fork and Clone the Repository
`bash
git clone https://github.com/sonubhosle/DevIcons.git
cd DevIcons
`
2. Install Dependencies
`bash
npm install
`
3. Start the Development Server
`bash
npm run dev
`
This will start the icon browser application, where you can see your changes live.
4. Adding a New Icon
* Find the SVG path data for your new icon.
* Add a new IconData object to the ICONS array in constants.ts`.