Our icon collection consists of SVGs, providing you with multiple options for including them in your HTML, depending on your project setup. You can easily obtain the icons by downloading the entire icon pack from the releases section, or you can selectively download individual icons from our icons gallery.
To embed an icon as an SVG image, simply copy and paste the SVG code of the desired icon directly into your HTML. This allows you to customize the icon's size, color, and other properties as needed, using CSS or inline styles.
<html>
<head>
<title>Icon Usage Example</title>
<style>
.icon {
fill: #ff0000; /* Customize the color */
width: 24px; /* Customize the size */
height: 24px;
}
</style>
</head>
<body>
<h1>Using an Icon in HTML</h1>
<svg class="icon">
<!-- Paste the SVG code of the icon here -->
</svg>
</body>
</html>
Alternatively, you can reference the icons as normal images using the '<img>' element. Provide the path or URL to the SVG file in the 'src' attribute of the '<img>' tag.
<html>
<head>
<title>Icon Usage Example</title>
</head>
<body>
<h1>Using an Icon as an External Image</h1>
<img src="path/to/your/icon.svg" alt="Icon Description" width="24" height="24">
</body>
</html>
We provide a convenient SVG sprite as part of the '@josemi-icons/svg' package that includes all the icons in a single file. This approach reduces the number of HTTP requests, improves loading times, and simplifies the management of icons in your project. You can easily reference icons anywhere in your HTML by using the '<svg>' and '<use>' elements.
<svg class="icon">
<use xlink:href="./node_modules/@josemi-icons/svg/sprite.svg#rocket"></use>
</svg>
You can apply styles to your icons using CSS, just as you would with any other HTML element.
.icon {
color: #FF5733; /* Replace with your desired color */
width: 32px; /* Set the icon's width */
height: 32px; /* Set the icon's height */
}
By employing these embedding techniques, you can seamlessly integrate our icons into your HTML-based projects, enhancing your visual aesthetics and user experience.
Remember, you can download the complete icon pack or select specific icons from our gallery to suit your project's needs. Feel free to customize the icons further to align with your project's unique design requirements.