Using Icons

Here are two key things to remember when integrating icons into various types of projects:

SF Symbols (opens in a new tab) for Mac & iOS Projects
React-icons (opens in a new tab) for All Projects

iOS/Mac Projects

Utilize the Mac application SF Symbols (opens in a new tab) for seamless integration of icons into your iOS projects. Simply install SF Symbols on your Mac, search for the desired icon, and copy it into Xcode for immediate use.

React/Next.js Projects

For React (Next.js) projects, consider leveraging libraries such as React-icons (opens in a new tab). This comprehensive library includes various open-source icon sets like Lucide (opens in a new tab), Bootstrap (opens in a new tab) and Google Material UI (opens in a new tab). Installation instructions are provided at the bottom of the React-icons page and are straightforward to follow. Keep in mind that multiple import statements may be necessary as icons from different packages might be sourced like the following.

import { IoWarningOutline } from "react-icons/io5";
import { PiNumberCircleOneFill } from "react-icons/pi";
import { HiOutlineRectangleStack } from "react-icons/hi2";
<PiNumberCircleOneFill />
<HiOutlineRectangleStack />
<IoWarningOutline size="24" />

Other Types of Projects

Explore individual icon downloads available on websites listed within React-icons (opens in a new tab). Websites such as Bootstrap (opens in a new tab) offer SVG downloads for individual icons, while Lucide (opens in a new tab) provides various formats including SVG. SVG icons can then be copied and directly pasted into an HTML file, or included in projects as image assets.

Icons for This Site

This section explains which icon packs are installed for this site. They were installed additionally after the initial installation of this site. If you don't need to use icons, you can skip this part.

The Cards, displayed below, contain an icon. To incorporate icons, they must be installed as libraries or added as images. For this site, React-Icons (opens in a new tab), mentioned above, has been installed. Consequently, adding a new icon simply requires searching and selecting it from React-Icons (opens in a new tab), adding an import statement in the .mdx file, and inserting the icon tag.

Scroll to Top Stay here

Installation

Navigate to the project directory and execute the following command in Terminal:

npm install react-icons --save

Selecting an icon

You can search for an icon in the search box (opens in a new tab) and click on it to view the import statement and the icon name tag.

Import in .mdx

Import the icon as specified in the code of the selected icon.

import { IoWarningOutline } from "react-icons/io5";
import { PiNumberCircleOneFill } from "react-icons/pi";
import { HiOutlineRectangleStack } from "react-icons/hi2";

If you want to adjust the size of the icons, add the size property in the icon tags.

<PiNumberCircleOneFill />
<HiOutlineRectangleStack />
<IoWarningOutline size="24" />

Next.js to GitHub Pages PostgreSQL Vercel to Local