boy icon

boy from Keyline Icons by Keyline Icons · Stroke · MIT Free for personal and commercial use.

Name: boy
Set: Keyline Icons
Style: Stroke
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

boy-duotone boy-fill boy-sharp boy-sharp-duotone boy-sharp-fill boy-sharp-two-tone boy-two-tone

The same icon in other sets

boyEmoji One (Colored)boyFluent Emoji boyFluent Emoji Flat boyFluent Emoji High Contrast boyFirefox OS Emoji boycss.gg boyIconPark boyIconPark Outline boyIconPark Solid boyIconPark TwoTone boyMaterial Symbols boyMaterial Symbols Light boyNoto Emoji boyOpenMoji boyTwitter Emoji

Use the boy icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 10.5C21.1046 10.5 22 11.6193 22 13C22 14.3807 21.1046 15.5 20 15.5L20 15.738C20 17.3 19 18.9 17.45 20.1C15.9 21.3 13.94 22 12 22C10.06 22 8.1 21.3 6.55 20.1C5 18.9 4 17.3 4 15.738L4 15.5C2.8954 15.5 2 14.3807 2 13C2 11.6193 2.8954 10.5 4 10.5C6 10.5 6.6 9 7.6 7.6C8.9 8.6 11.2 9.2 13 8.7C15 8.35 16.2 7.4 17.4 6.6C17.9 8 18.5 10 20 10.5ZM4 10.5L4 7.5C4 4 6.8 2 11.5 2C14.4 2 16.5 3.5 19.4 2C20 3.6 20 5.5 20 7.5L20 10.5M9 12.6L9 13.6M15 12.6L15 13.6M10.5 17.45C11 17.8 11.5 17.95 12 17.95C12.5 17.95 13 17.8 13.5 17.45"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsBoy(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 10.5C21.1046 10.5 22 11.6193 22 13C22 14.3807 21.1046 15.5 20 15.5L20 15.738C20 17.3 19 18.9 17.45 20.1C15.9 21.3 13.94 22 12 22C10.06 22 8.1 21.3 6.55 20.1C5 18.9 4 17.3 4 15.738L4 15.5C2.8954 15.5 2 14.3807 2 13C2 11.6193 2.8954 10.5 4 10.5C6 10.5 6.6 9 7.6 7.6C8.9 8.6 11.2 9.2 13 8.7C15 8.35 16.2 7.4 17.4 6.6C17.9 8 18.5 10 20 10.5ZM4 10.5L4 7.5C4 4 6.8 2 11.5 2C14.4 2 16.5 3.5 19.4 2C20 3.6 20 5.5 20 7.5L20 10.5M9 12.6L9 13.6M15 12.6L15 13.6M10.5 17.45C11 17.8 11.5 17.95 12 17.95C12.5 17.95 13 17.8 13.5 17.45"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 10.5C21.1046 10.5 22 11.6193 22 13C22 14.3807 21.1046 15.5 20 15.5L20 15.738C20 17.3 19 18.9 17.45 20.1C15.9 21.3 13.94 22 12 22C10.06 22 8.1 21.3 6.55 20.1C5 18.9 4 17.3 4 15.738L4 15.5C2.8954 15.5 2 14.3807 2 13C2 11.6193 2.8954 10.5 4 10.5C6 10.5 6.6 9 7.6 7.6C8.9 8.6 11.2 9.2 13 8.7C15 8.35 16.2 7.4 17.4 6.6C17.9 8 18.5 10 20 10.5ZM4 10.5L4 7.5C4 4 6.8 2 11.5 2C14.4 2 16.5 3.5 19.4 2C20 3.6 20 5.5 20 7.5L20 10.5M9 12.6L9 13.6M15 12.6L15 13.6M10.5 17.45C11 17.8 11.5 17.95 12 17.95C12.5 17.95 13 17.8 13.5 17.45"/></svg>
</template>

CSS

.icon-boy {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M20%2010.5C21.1046%2010.5%2022%2011.6193%2022%2013C22%2014.3807%2021.1046%2015.5%2020%2015.5L20%2015.738C20%2017.3%2019%2018.9%2017.45%2020.1C15.9%2021.3%2013.94%2022%2012%2022C10.06%2022%208.1%2021.3%206.55%2020.1C5%2018.9%204%2017.3%204%2015.738L4%2015.5C2.8954%2015.5%202%2014.3807%202%2013C2%2011.6193%202.8954%2010.5%204%2010.5C6%2010.5%206.6%209%207.6%207.6C8.9%208.6%2011.2%209.2%2013%208.7C15%208.35%2016.2%207.4%2017.4%206.6C17.9%208%2018.5%2010%2020%2010.5ZM4%2010.5L4%207.5C4%204%206.8%202%2011.5%202C14.4%202%2016.5%203.5%2019.4%202C20%203.6%2020%205.5%2020%207.5L20%2010.5M9%2012.6L9%2013.6M15%2012.6L15%2013.6M10.5%2017.45C11%2017.8%2011.5%2017.95%2012%2017.95C12.5%2017.95%2013%2017.8%2013.5%2017.45%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M20%2010.5C21.1046%2010.5%2022%2011.6193%2022%2013C22%2014.3807%2021.1046%2015.5%2020%2015.5L20%2015.738C20%2017.3%2019%2018.9%2017.45%2020.1C15.9%2021.3%2013.94%2022%2012%2022C10.06%2022%208.1%2021.3%206.55%2020.1C5%2018.9%204%2017.3%204%2015.738L4%2015.5C2.8954%2015.5%202%2014.3807%202%2013C2%2011.6193%202.8954%2010.5%204%2010.5C6%2010.5%206.6%209%207.6%207.6C8.9%208.6%2011.2%209.2%2013%208.7C15%208.35%2016.2%207.4%2017.4%206.6C17.9%208%2018.5%2010%2020%2010.5ZM4%2010.5L4%207.5C4%204%206.8%202%2011.5%202C14.4%202%2016.5%203.5%2019.4%202C20%203.6%2020%205.5%2020%207.5L20%2010.5M9%2012.6L9%2013.6M15%2012.6L15%2013.6M10.5%2017.45C11%2017.8%2011.5%2017.95%2012%2017.95C12.5%2017.95%2013%2017.8%2013.5%2017.45%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/boy.svg?color=%231a73e8&size=48