This content originally appeared on DEV Community and was authored by deni sugiarto
Choosing a useful library can be tricky during web development because each library has its pros and cons. Today, I want to share the icon libraries I frequently use. For standard icons like mail and phone, I prefer Lucide Icons. Lucide Icons offers a wide range of high-quality, customizable icons that are perfect for everyday use in web applications. They are lightweight and easy to implement, making them a great choice for developers who need a reliable set of standard icons.
However, when it comes to brand icons, Lucide Icons doesn’t always have what I need. After some research, I discovered Simple Icons. You can check out this library at Simple Icons. Since I use React, I integrated their package library. Simple Icons offers “3150 Free SVG icons for popular brands,” which is amazing. After incorporating it into my projects, it perfectly addressed my need for standard brand icons.
Here’s a quick example of how to use Simple Icons in a React project:
First, install the necessary package:
npm install react-icons simple-icons
Then, you can use the icons in your React components like this:
import React from 'react';
import { SiReact, SiNextDotJs, SiJavascript, SiTypescript } from 'react-icons/si';
const IconExample = () => (
<div>
<h1>Using Simple Icons in React</h1>
<div>
<SiReact size={40} color="#61DBFB" />
<SiNextDotJs size={40} color="#000000" />
<SiJavascript size={40} color="#F7DF1E" />
<SiTypescript size={40} color="#3178C6" />
</div>
</div>
);
export default IconExample;
In this example, we import icons for React, Next.js, JavaScript, and TypeScript from the react-icons package, which includes icons from Simple Icons. We then use these icons in a simple React component.
react #simpleicons #Nextjs #WebDevelopment #javascript #typescript
This content originally appeared on DEV Community and was authored by deni sugiarto
deni sugiarto | Sciencx (2024-07-01T02:01:49+00:00) Struggling with Brand Icons in Web Development? Try Simple Icons!. Retrieved from https://www.scien.cx/2024/07/01/struggling-with-brand-icons-in-web-development-try-simple-icons/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.