<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta property=”og:url” content=”https://www.khushmeen.com/icons” />
    <meta property="og:title" content="Doodle icons" />
    <meta property="og:image" content="https://www.khushmeen.com/img/icon_og.png" />
    <meta property=”og:type” content=”website” />
    <meta property="og:description" content="400+ handcrafted icons free for your next project" />
    <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/img/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <title>Doodle icons by Khushmeen</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>
    <link rel="stylesheet" href="./css/style.css"></link>
    <link rel="stylesheet" href="./css/aos.css"></link>
    <script src="https://use.fontawesome.com/e79b984671.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GE0ZJDD3Q0"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-GE0ZJDD3Q0');
    </script>
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
    <style type="text/css">
      #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
      #mc-embedded-subscribe {
        color: #fff !important;
        background-color: #007bff !important;
        border-color: #007bff !important;
      }

      #mc-embedded-subscribe:hover {
        color: #fff !important;
        background-color: #0069d9 !important;
        border-color: #0062cc !important;
      }
    </style>
</head>
<body>
  <div style="border-bottom: 1px solid #efefef;">
    <nav class="container navbar navbar-expand-lg navbar-light bg-light" style="border: none">
      <a class="navbar-brand" href="/">
        <img style="height: 40px;" src="./img/logo.png"/>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
          </li>
        </ul>
        <div>
          <a class='px-1' href='/illustrations'>Illustrations</a>
          <a class='px-1' href='/icons'>Doodle Icons</a>
          <a href="https://www.instagram.com/khushmeen.s"><i class="fa fa-instagram"></i></a>
          <a href="https://twitter.com/khushmeensidhu"><i class="fa fa-twitter"></i></a>
          <a href="https://dribbble.com/khushmeen"><i class="fa fa-dribbble"></i></a>
        </div>
      </div>
    </nav>
  </div>

    <div style="height:calc(100% - 67px); width:100%; display: flex; position: relative;
    flex-direction:column; justify-content:center; align-items:center;
    background-image: url('img/icon_banner.jpg'); background-size: cover;">
        <div class="text-center" style="background-color: #ffffffff; padding: 30px;
        box-shadow: rgba(256, 256, 256, 1) 0px 0px 100px 80px;">
          <h1 class="display-3 font-weight-bold">Doodle Icons</h1>
          <h4 class="text-muted pb-1">400+ handcrafted icons free for your next project</h4>
          <h5 class="text-muted pb-4">Free icons for commercial and personal use under CC0 license - no attribution required.</h5>
          <a role="button" href="https://www.figma.com/community/file/1019353050314527791"
            class="btn btn-outline-dark mt-2 mr-2 outline-btn" style="border-radius: 25px;">
            <img src="img/figma.svg" style="width: 10px; margin-right: 6px;"/>
            Get figma file
          </a>
          <a type="button" class="btn action-btn brand-btn btn-rounded  mt-2 mr-2" href="https://khushmeen.gumroad.com/l/doodleicons">
            Download all icons
          </a>
          <a type="button" class="btn action-btn btn-rounded mt-2 jump" style="background: black" href="https://unicornicons.com/icons">
            Get animated icons
          </a>
        </div>
    </div>
    <div style="background-color: #f6f9ff; padding: 10rem 0px">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="img-banner" src="/img/icons.png"/>
          </div>
          <div class="col-md-6 flex-col flex-center-center">
            <div class="text-left mt-2 py-4">
              <h2 class="font-weight-bold">Beautiful hand-drawn icons</h2>
              <h5 class="text-muted">Hand-drawn icons using an icon grid</h5>
              <h5 class="text-muted">400+ icons with 15 categories</h5>
              <h5 class="text-muted">Free for personal & commercial use</h5>
              <h5 class="text-muted">No attribution required</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="background-color: black; padding: 12rem 0px; color: white">
      <div class="container">
        <div class="row">
          <div class="col-md-12 flex-col flex-center-center">
            <h2 class="font-weight-bold">Available in multiple formats</h2>
            <h5 class="">Icons available in PNG, SVG & figma format</h5>
            <div class="flex-row " style="padding-top:32px">
              <div style="flex: 1; padding: 0px 10px">
                <img style="width: 48px;"src="/img/file-svg.svg"/>
              </div>
              <div style="flex: 1; padding: 0px 10px">
                <img style="width: 48px;" src="/img/file-png.svg"/>
              </div>
              <div style="flex: 1; padding: 0px 10px">
                <img style="width: 48px;" src="/img/file-figma.svg"/>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="padding: 8rem 0px; position:relative;background-color: #2563EB; color: white">
      <div class="container">
        <div class="row relative" >
          <div class="col-md-12 flex-col flex-center-center">
            <h2 class="font-weight-bold">Download all the icons </h2>
              <a type="button" class="btn btn-light mt-2" style="border-radius: 25px;" href="https://khushmeen.gumroad.com/l/doodleicons">
                Download now
              </a>
          </div>
        </div>
      </div>
    </div>
    <!-- <a href="https://unicornicons.com" class="hover-card">
      <div class="hover-card-content">
        <img src="./img/og.jpg">
        <div>
          <h5>Unicron icons</h5>
          <p>Free animated lottie icons for your next project. Available in JSON & SVG formats</p>
          <button class="btn btn-rounded  mt-2" style="border-radius: 25px; background-color:black; color:white" >
            Download now
          </button>

        </div>
      </div>
    </a> -->
    <div class="flex-row flex-center-center"
        style="background: #2563EB;color:white; padding: 18px 0">
        <!-- <img class="w-50" src="/img/footer.png"/> -->
            <a href="https://www.instagram.com/khushmeen.s"><i class="fa fa-instagram" style="color: white"></i></a>
            <a href="https://twitter.com/khushmeensidhu"><i class="fa fa-twitter" style="color: white"></i></a>
            <a href="https://dribbble.com/khushmeen"><i class="fa fa-dribbble" style="color: white"></i></a>
    </div>
</body>
</html>
