Menu

Beta
Sign in
Home SVG icon, rounded

Home SVG icon, rounded

A simple house symbol marks the main page or starting point in a digital product. Place it in a website navigation bar or a mobile app tab bar to help people return to the beginning.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Lt2AW5ghA2qq/amnt.svg" alt="Home" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Shape 1"><path d="M14 28L14 49C14 51.21 15.79 53 18 53L46 53C48.21 53 50 51.21 50 49L50 28L32 12L14 28Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Shape 2"><path d="M9 32L29.34 13.57C30.85 12.21 33.15 12.21 34.66 13.57L55 32" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-3" data-name="Shape 3"><path d="M26 53L26 38C26 36.9 26.9 36 28 36L36 36C37.1 36 38 36.9 38 38L38 53" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.home {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Lt2AW5ghA2qq/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.home {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Lt2AW5ghA2qq/amnt.svg") center / contain no-repeat;
}
React
import HomeSvg from "./home.jsx"; // from the React tab above

<HomeSvg width={48} height={48} />

Tags

homehousenavigationmain

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Home. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings