Link Copied

Icons

We have used ReactIcons in this project, so you use the icons please check the official website.

How to use


//  import icons from react-icons
    import { ..., AiFillYoutube } from "react-icons/ai";
    const Article = () => {
        return (
            <AiFillYoutube />
            {/*to change size*/}
            <AiFillYoutube className="text-[50px]" />
            {/*to change color*/}
            <AiFillYoutube className="text-[#631E9E]" />
            {/*to change color using tailwind css classes*/}
            <AiFillYoutube className="text-blue-600" />
            {/*to give paddings and margins*/}
            <AiFillYoutube className="ml-[15px] mr-[20px] p-[20px]" />
            {/*to use inline i.e one after other in a line*/}
            <AiFillYoutube className="inline-block" />
        )		
    }

    export default Article;

Demo

The above code block will show you the following icon.

How to use different group/family of icons in ReactIcons,

In react icons we have around 22 icons groups or types like "Ant design icons, Bootstrap icons, Boxicons . . ." etc. When you click on the sidebar list button we se a proper import statement and list of all icons in the icon group.

ReactIcons website screenshot

here we can see each icons in BoxIcons there is a "Bi" prefix i.e each icon in BoxIcons start with a "Bi" like "BiAbacus, BiAdjust . . ." etc. so when want to use any icon from BoxIcons you have to import the icon as import { IconName } from "react-icons/bi";


    //  icons from Ant Icons
    import { AiFillYoutube } from "react-icons/ai";
    //  icons from BoxIcons
    import { BiAbacus, BiAdjust } from "react-icons/bi";
    const Article = () => {
        return (
            {/*icons from Ant Icons*/}
            <AiFillYoutube />
            <AiFillTwitterCircle />
            {/*icons from BoxIcons*/}
            <BiAbacus />
            <BiAdjust />
        )		
    }

    export default Article;

Note* : when you search any icon using the search option in react icons, all the icons from different groups will be displayed mixed so to know from where to import the icons see the first 2 letters of the icon name then import that icon group.

For any any queries related to this project / template feel free to connect with us at webexpe13@gmail.com. You can also post any comments on our github discussions.