As long as we are building a UI Components in any framework we come across situations where we need the icons to get the interest of the user, but we get stuck on choosing which library or which tool to use.
Here comes https://iconify.design/ which is far better then every icon package I have used, it is ok to use the icons from the design pattern installed eg: MUI, ANTD etc. But when there is a need of creating your own custom components with the icons you can take the iconify as your primary choice, because it is::
- Easy to setup
- Easy to use
- Light weight component
- You can get the ready to use Source code
- TypeScript Supported
I have been using the Icons from https://iconify.design/ in almost every project I have worked on.
Installation
Super easy,
if you use npm:
npm install --save-dev @iconify/react
if you use yarn
yarn add --dev @iconify/react
Importing
import { Icon } from '@iconify/react';
Usage
import React from 'react';
import { Icon } from '@iconify/react';
export default function App() {
return (
<div>
<div className="light-blue-block">
<Icon style={{ fontSize: '54px' }} icon="mdi:user" />
</div>
</div>
);
}
You can modify anything you want using the style or className props.
Advantages
Even if you don't want to install the package, there is the SVG Code of the icon which you can use directly in your component
You can even modify this SVG Image according to your need.
import React from "react";
export default function App() {
return (
<div>
<div className="light-blue-block">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10em"
height="10em"
viewBox="0 0 24 24"
>
<path
fill="gray"
d="M12 4a4 4 0 0 1 4 4a4 4 0 0
1-4 4a4 4 0 0 1-4-4a4
4 0 0 1 4-4m0 10c4.42 0 8
1.79 8 4v2H4v-2c0-2.21
3.58-4 8-4"
/>
</svg>{" "}
</div>
</div>
);
}
You can get the icons from here: https://icon-sets.iconify.design/
Thanks if you read till here, let me which sets of icons you have used in your code?
If you like this and starting to use https://iconify.design/ then give a heads up.
Top comments (0)