Hardhat icon

logos:hardhat

The Hardhat icon (logos:hardhat) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 106 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: SVG Logos
Author: Gil Barbara
License: CC0-1.0
Size: 512 × 106

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="106" viewBox="0 0 512 106"><path fill="#15191f" d="M196.963 81.853h9.544V57.386h27.243v24.467h9.631V26.325h-9.63v23.34h-27.244v-23.34h-9.544zm74.53.608c9.196 0 15.35-3.818 17.439-7.289l1.909 6.675h5.032V56.605c0-11.973-2.603-19.782-20.737-19.782c-15.617 0-19.435 7.115-19.435 16.312l9.01-.087c0-5.553 2.256-8.85 10.499-8.85c8.936 0 11.279 3.73 11.54 10.151l-13.97 1.388c-12.654 1.215-18.473 4.946-18.473 13.102c0 9.37 7.641 13.622 17.185 13.622m2.342-7.282c-6.507 0-9.978-2.336-9.978-6.42c0-3.47 2.603-5.12 10.325-5.987l12.58-1.388v1.388c0 7.715-4.758 12.407-12.927 12.407m32.53 6.674h9.283v-24.64c0-7.202 1.822-12.32 11.106-12.32c.78 0 1.648.173 2.516.173v-8.243h-1.475c-8.676 0-12.928 3.818-14.316 6.768l-2.169-6.16h-4.946zm45.904.608c10.498 0 15.444-3.905 17.019-6.942l2.069 6.334h5.032V20.512h-9.11v22.385c-1.909-2.95-6.34-6.074-15.097-6.074c-14.75 0-18.914 10.679-18.914 22.819s4.338 22.819 19 22.819m2.603-7.636c-10.065 0-12.147-6.247-12.147-15.183s2.082-15.017 12.234-15.017c10.585 0 12.407 6.42 12.407 15.017c0 9.11-2.17 15.183-12.494 15.183m33.143 7.028h9.117l.174-24.9c0-8.417 2.002-12.321 11.366-12.321c9.457 0 10.845 4.004 10.845 12.32v24.901h9.197V57.826c0-12.754-2.95-20.996-17.44-20.996c-8.502 0-12.407 2.95-14.142 6.16V20.518h-9.11zm66.982.608c9.21 0 15.357-3.818 17.439-7.282l1.909 6.674h5.032V56.605c0-11.973-2.603-19.782-20.736-19.782c-15.618 0-19.435 7.115-19.435 16.312l9.01-.087c0-5.553 2.256-8.85 10.498-8.85c8.937 0 11.28 3.73 11.54 10.151l-13.97 1.388c-12.68 1.215-18.48 4.946-18.48 13.102c.013 9.37 7.649 13.622 17.193 13.622m2.342-7.282c-6.507 0-9.978-2.336-9.978-6.42c0-3.47 2.603-5.12 10.325-5.987l12.58-1.388v1.388c0 7.715-4.771 12.407-12.927 12.407M512 82.187v-7.448c-9.63.433-11.366-1.475-11.366-5.64V44.892H512V37.43h-11.626V26.325h-9.197V37.43l-6.34 1.91v5.552h6.34V69.1c0 10.498 6.16 13.969 20.823 13.088"/><path fill="#f0d50c" d="M152.617 88.474s-23.246-3.444-35.53-4.432c-11.796-.947-25.775-1.495-40.772-1.495s-28.975.548-40.769 1.495C23.26 85.043.016 89.822.016 89.822v6.007c0 5.339 34.162 9.677 76.3 9.677c42.136 0 76.297-4.338 76.297-9.677zM52.856 8.802C24.994 18.729 6.389 45.108 6.387 74.685v9.905a169.3 169.3 0 0 1 30.287-4.392q-.103-2.85-.106-5.743c.01-25.989 6.283-49.375 16.288-65.653"/><path fill="#fff04d" d="M146.24 74.685a69.64 69.64 0 0 0-15.962-44.466a145 145 0 0 1 6.621 44.243q0 4.095-.21 8.095a86 86 0 0 1 9.44 2.003z"/><path fill="#ffea00" d="M146.24 74.685a69.64 69.64 0 0 0-15.962-44.466a145 145 0 0 1 6.621 44.243q0 4.095-.21 8.095a86 86 0 0 1 9.44 2.003z"/><path fill="#fff04d" d="M130.278 30.216C111.544 7.506 80.601-1.053 52.86 8.802C42.848 25.08 36.578 48.466 36.578 74.458q0 2.894.106 5.743c10.412-.804 22.465-1.301 35.373-1.391h4.265a408 408 0 0 1 60.374 3.76q.203-4.004.21-8.095a145 145 0 0 0-6.628-44.26"/><path fill="#fff04d" d="M104.443 34.84L100.01 7.144a5.34 5.34 0 0 0-3.75-4.301a70.24 70.24 0 0 0-39.555 0a5.34 5.34 0 0 0-3.747 4.301l-4.435 27.698m27.799 43.381h-4.268C31.899 78.503.02 82.72.02 87.883v7.482c-.065.438.029.886.264 1.261a17.8 17.8 0 0 1 6.874-3.157a134.5 134.5 0 0 1 19.292-3.23a12.92 12.92 0 0 1 10.12 3.304a27.23 27.23 0 0 0 18.388 7.145h42.714a27.23 27.23 0 0 0 18.387-7.145a12.9 12.9 0 0 1 10.125-3.307a134.5 134.5 0 0 1 19.288 3.23a16.1 16.1 0 0 1 6.52 2.853c.11.11.238.207.334.307a1.87 1.87 0 0 0 .267-1.268v-7.481c.024-5.323-34.138-9.654-76.271-9.654"/><path fill="#6e6f70" d="m92.393 56.004l-16.091 9.905v12.864z"/><path fill="#0a0a0a" d="M76.318 78.773V65.909l-16.091-9.905zM60.227 50.128l16.091 9.304v-35.33z"/><path fill="#6e6f70" d="M92.393 50.128L76.302 24.099v35.329l16.091-9.303z"/></svg>

How to use the Hardhat icon

React

import { Icon } from "@iconify/react";

<Icon icon="logos:hardhat" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="logos:hardhat" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="logos:hardhat" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--hardhat]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:hardhat"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="logos:hardhat"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/logos/hardhat.svg" alt="Hardhat icon" width="24" height="24">

Related icons in SVG Logos

Hardhat icon in other icon sets

Hardhat icon FAQ

Is the Hardhat icon free for commercial use?

Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.

How do I use the Hardhat icon in React?

Install @iconify/react and render <Icon icon="logos:hardhat" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Hardhat icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/hardhat.svg" alt="Hardhat icon">, or paste the SVG code inline to style it with CSS.

Browse all SVG Logos icons →