Font Awesome

Include Font Awesome in your project:
Add this line to the

Use an icon

To use an icon, add a or element with the appropriate classes:

Material Icons

Include Material Icons in your project:
Add this line to the

Use an icon

To use an icon, add a element with the class material-icons and the icon name:

camera_alt

2. Using CSS for Custom Icons

You can also create your own icons with CSS. Here’s a simple example using pure CSS:

Create a basic HTML structure

Add CSS to style your icon

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

This CSS snippet creates a simple star shape using borders and positioning.

3. SVG Icons

You can also use SVGs for high-quality icons:

Inline SVG

Using SVG as a background image

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

Tips

Size and Color: For font icons and inline SVGs, you can adjust the size with font-size or the width and height properties, and change the color with color or fill for SVGs.
Accessibility: Always consider accessibility by adding descriptive text or aria attributes where needed.
Feel free to experiment and mix different methods to find what works best for your project!