Bootstrap 5 Icons

Bootstrap 5 has a growing collection of open-source, high-quality icons. You can use them within any element in your project with or without bootstrap.

There are the following ways to include bootstrap icons:

• Install Bootstrap icons package manager.

npm i bootstrap-icons

• Embed them within the HTML of your page.
• Use the SVG sprite to insert icons through the <use> element. Use the icon’s filename as the fragment identifier.
• Copy the icons in your directory and reference them as regular images.
• Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML.
• The simplest way to include Bootstrap icons in a web page is using the CDN link. 

There are some tested alternative open-source icon sets to bootstrap icons like font awesome, feather, and octicons which have a wide range of scalable vector icons.

Example 1: IN this example we will create the icon as an SVG element.

Output:

👁 Image

Example 2: In this example we will use the font icon CDN link to import the icon

Output:

👁 Image

Reference:https://getbootstrap.com/docs/5.0/extend/icons/#bootstrap-icons