<div class="container my-12">
<h2 class="text-center pb-12 semibold text-5xl font-heading text-alpha">Icons</h2>
<div class="space-y-12">
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">Functional</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-chevron
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-arrow
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-search"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-search
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-close
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-user"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-user
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-error"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-error
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-pin
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-mail"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-mail
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-phone"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-phone
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-play
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-quote"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-quote
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-share"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-share
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-facebook"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-facebook
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-instagram"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-instagram
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-twitter"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-twitter
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-youtube"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-youtube
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-download"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-download
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-calendar"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-calendar
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-clock"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-clock
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-show"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-show
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-hide"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-hide
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">Project</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-graph"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-graph
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-shield"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-shield
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-price"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-price
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-speed"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-speed
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-phone-ring"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-phone-ring
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-rocket"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-rocket
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-router"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-router
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-star"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-star
</div>
</div>
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
<svg class="w-full h-full fill-current text-bravo">
<use href="/front-end/sprite.svg?v=1.2#icon-wifi"></use>
</svg>
</div>
</div>
<div class="block font-bold bg-white p-4">
icon-wifi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container my-12">
<h2 class="text-center pb-12 semibold text-5xl font-heading text-alpha">Icons</h2>
<div class="space-y-12">
{% for name, data in icons %}
<div class="flex items-center justify-center w-full">
<div class="w-full">
<h3 class="text-center text-2xl text-alpha mb-4">{{ name }}</h3>
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
{% for item in data %}
<div class="shadow-md">
<div class="flex-1 flex bg-grey-50 h-24 justify-center items-center p-6">
<div class="h-12 w-12">
{% render "@icon", { name: item, modifier: 'w-full h-full fill-current text-bravo' } %}
</div>
</div>
<div class="block font-bold bg-white p-4">
{{ item }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
],
"icons": {
"Functional": [
"icon-chevron",
"icon-arrow",
"icon-search",
"icon-close",
"icon-user",
"icon-error",
"icon-pin",
"icon-mail",
"icon-phone",
"icon-play",
"icon-quote",
"icon-share",
"icon-facebook",
"icon-instagram",
"icon-twitter",
"icon-youtube",
"icon-download",
"icon-calendar",
"icon-clock",
"icon-show",
"icon-hide"
],
"Project": [
"icon-graph",
"icon-shield",
"icon-price",
"icon-speed",
"icon-phone-ring",
"icon-rocket",
"icon-router",
"icon-star",
"icon-wifi"
]
}
}
No notes defined.