Icons

There are three ways to use icons in your project:

Way 1: Use the SVG code

✅ No additional libraries, dependencies, or 100s of KB to add, and the icon and styles are simple to modify in the HTML.
💢 Code clarity
🏆 Best for: Web sites or apps that are not using many icons

• Start with the code below
• Find icons from the list or go to
  • Google Icons
  • Material Design Icons
  • SVG Repo
  • IconBolt
• Get the SVG code, replace the path in the SVG code

Way 2: Save the SVG code in a file

✅ No additional libraries, dependencies, or 100s of KB to add, code clarity
💢 Cannot edit or change styles and the icon in the html, you need to edit the SVG file
🏆 Best for: Web sites or apps use the same icons in many places, code clarity is prioritized

The same steps in way 1 apply here, but you need to save the SVG code in a file with the .svg extension.

Way 3: Use popular CSS libraries

✅ Code clarity, the icon and styles are simple to modify in the HTML.
💢 Additional libraries, dependencies, and 100s of KB to add
🏆 Best for: Web apps that need 100's of icons, not recommended for websites

• Add the CDN link of the library, or install it in your project:
  Most popular icon libraries Font Awesome, Feather Icons, Google Material Icons, Bootstrap Icons, Ionic Icons
• Search for the icon you want to use
• Copy the HTML code provided by the library
• You can color with CSS Vars framework classes
• Follow their styling guide