This guide will give you everything you need to start using Icon Bundles to manage the Icons on your site very easily.
This is a very easy first step to using our Icon Bundle on a site.
SVG Example:
<!-- Add Icon SVG -->
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="24" height="24"/>
</svg>
Image Example:
<!-- Add Icon IMG -->
<img src="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="50" height="50">
CSS Example:
/* Add Icon CSS */
.example {
width: 50px;
height: 50px;
background-image: url('http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg');
}
Object Example:
<!-- Add Icon Object -->
<object type="image/svg+xml" data="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" width="50" height="50"></object>
Canva Example:
<!-- Add Icon Canva -->
<canvas id="myCanvas" width="50" height="50"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0, 50, 50);
}
img.src = 'http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg';
</script>
Embed Example:
<!-- Add Icon Embed -->
<embed src="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg" type="image/svg+xml" width="50" height="50">
You can customize the icon, for example changing the size and color of the icon.
<!-- Add in <head> -->
<link href="http://hytech-icons.vercel.app/icon/pro/css/all.min.css" rel="stylesheet" type="text/css">
// Change this hex color code to your own.
?color=000000
// Example (Without #)
http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg?color=ff00ff
// Change size Icon
<svg width="24" height="24" ...
// Rotate
<svg class="fa-rotate-90" ...
<svg class="fa-rotate-180" ...
<svg class="fa-rotate-270" ...
<svg class="fa-flip-horizontal" ...
<svg class="fa-flip-vertical" ...
<svg class="fa-flip-both" ...
// Fixed Width Icons
<svg class="fa-fw" ...
// Bordered & Pulled Icons
<svg class="fa-border" ...
<svg class="fa-2x fa-pull-left" ...
<svg class="fa-2x fa-pull-right" ...
// Stacking Icons
<svg class="fa-stack" ...
<svg class="fa-stack fa-2x" ...
<svg class="fa-stack-2x" ...
<svg class="fa-stack-1x fa-inverse" ...
Inserting animation effects on your icons is very easy.
<!-- Add in <head> -->
<link href="http://hytech-icons.vercel.app/icon/pro/css/all.min.css" rel="stylesheet" type="text/css">
Beat:
<svg class="fa-beat" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-beat" style="--fa-animation-duration: 0.5s;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-beat" style="--fa-animation-duration: 2s;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-beat" style="--fa-beat-scale: 2.0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Fade:
<svg class="fa-fade" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Beat-Fade:
<svg class="fa-beat-fade" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Bounce:
<svg class="fa-bounce" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-bounce" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Flip:
<svg class="fa-flip" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Shake:
<svg class="fa-shake" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="https://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Spin:
<svg class="fa-spin" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-spin fa-spin-reverse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-spin-pulse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
<svg class="fa-spin-pulse fa-spin-reverse" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/circle-user.svg" width="24" height="24"/>
</svg>
Icons that support dark mode will be even more charming. As a simple example we use Tailwind Dark Mode and DOM Manipulation.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- //Tailwind CSS -->
<!-- Dark Mode Config -->
<script>
tailwind.config = {
darkMode: 'class',
};
</script>
<!-- //Dark Mode Config -->
</head>
<body class="dark:bg-black">
<!-- Dark Mode Toggle -->
<div class="bg-gray-500 w-20 mx-auto mt-10 cursor-pointer rounded-3xl toggler dark:bg-green-500">
<div class="bg-white w-10 h-10 scale-75 rounded-3xl transition-transform dark:bg-black"></div>
</div>
<!-- //Dark Mode Toggle -->
<!-- Hytech Icon -->
<div class="flex justify-center">
<svg class="changeable-svg" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<image xlink:href="http://hytech-icons.vercel.app/icons/pro/duotone/user-large.svg?color=ff00ff" width="24" height="24"/>
</svg>
</div>
<!-- //Hytech Icon -->
</body>
<!-- Toggle functionality & DOM manipulation to make icons support dark mode -->
<script>
function changeSVGColorInDarkMode(isDarkMode) {
const svgs = document.querySelectorAll('.changeable-svg');
svgs.forEach(svg => {
const imageUrl = svg.querySelector('image').getAttribute('xlink:href');
const updatedImageUrl = isDarkMode ? imageUrl.replace('color=ff00ff', 'color=ffff00') : imageUrl.replace('color=ffff00', 'color=ff00ff');
svg.querySelector('image').setAttribute('xlink:href', updatedImageUrl);
});
}
function toggleDarkMode() {
const html = document.documentElement;
html.classList.toggle('dark');
const isDarkMode = html.classList.contains('dark');
changeSVGColorInDarkMode(isDarkMode);
}
const toggler = document.querySelector('.toggler');
toggler.addEventListener('click', toggleDarkMode);
function initializeSVGColor() {
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
changeSVGColorInDarkMode(isDarkMode);
}
initializeSVGColor();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
changeSVGColorInDarkMode(event.matches);
});
</script>
<!-- //Toggle functionality & DOM manipulation to make icons support dark mode -->
</html>