Add icons to this collection by clicking the heart icon.
Family icon - also known as people, love, family, young, adult, father, parents, and sons. Created in a clean gradient style with a white and gray finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 512 512"
>
<linearGradient
id="a"
x1="74.981"
x2="437.019"
y1="439.019"
y2="76.981"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff6308" />
<stop offset="1" stop-color="#9d3d1a" />
</linearGradient>
<circle cx="256" cy="256" r="256" fill="url(#a)" />
<linearGradient
id="b"
x1="278.701"
x2="355.886"
y1="160.299"
y2="160.299"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ff8945" />
</linearGradient>
<path
d="m278.701 306.113 6.164 95.175h44.805l26.216-95.175z"
fill="url(#b)"
/>
<linearGradient
id="c"
x1="233.299"
x2="358.534"
y1="243.847"
y2="243.847"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#01538d" />
<stop offset="1" stop-color="#001a31" />
</linearGradient>
<path
d="m265.081 201.446-31.782 74.964 65.833 62.45h59.402V201.446z"
fill="url(#c)"
/>
<linearGradient
id="d"
x1="162.357"
x2="247.487"
y1="160.988"
y2="160.988"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#01538d" />
<stop offset="1" stop-color="#001a31" />
</linearGradient>
<path
d="m162.357 304.737 19.973 96.551h44.805l20.352-96.551z"
fill="url(#d)"
/>
<linearGradient
id="e"
x1="213.435"
x2="256"
y1="260.908"
y2="260.908"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#0272aa" />
<stop offset="1" stop-color="#01375f" />
</linearGradient>
<path
d="M256 304.737h-24.12l-18.445-51.645 18.445-51.645H256v103.29z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="145.331"
x2="196.409"
y1="260.909"
y2="260.909"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#0272aa" />
<stop offset="1" stop-color="#01375f" />
</linearGradient>
<path
d="M145.331 201.446h32.633l18.445 51.645-18.445 51.645h-32.633v-103.29z"
fill="url(#f)"
/>
<path d="M177.96 201.45h53.916v103.29H177.96z" fill="#f3edee" />
<linearGradient
id="g"
x1="152"
x2="380.57"
y1="363.561"
y2="363.561"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ffa851" />
</linearGradient>
<path
d="M204.922 190.166c-21.906 0-39.727-17.822-39.727-39.727s17.821-39.727 39.727-39.727 39.727 17.822 39.727 39.727-17.821 39.727-39.727 39.727z"
fill="url(#g)"
/>
<linearGradient
id="h"
x1="152"
x2="380.57"
y1="363.561"
y2="363.561"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ff8945" />
</linearGradient>
<path
d="M307.078 190.166c-21.906 0-39.727-17.822-39.727-39.727s17.821-39.727 39.727-39.727 39.727 17.822 39.727 39.727-17.821 39.727-39.727 39.727z"
fill="url(#h)"
/>
<linearGradient
id="i"
x1="152"
x2="380.57"
y1="293.47"
y2="293.47"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ff8945" />
</linearGradient>
<circle cx="256" cy="220.53" r="33.2" fill="url(#i)" />
<linearGradient
id="j"
x1="152"
x2="380.57"
y1="293.47"
y2="293.47"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ff8945" />
</linearGradient>
<circle cx="153.47" cy="220.53" r="33.2" fill="url(#j)" />
<linearGradient
id="k"
x1="220.972"
x2="291.028"
y1="172.303"
y2="172.303"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#05ceff" />
<stop offset="1" stop-color="#01538d" />
</linearGradient>
<path
d="m256 282.106-8.573 5.556-14.128-5.556 2.494 13.096-14.821 9.606 6.163 96.48h57.73l6.163-96.48L256 291.033z"
fill="url(#k)"
/>
<linearGradient
id="l"
x1="118.438"
x2="188.494"
y1="172.303"
y2="172.303"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#70e2ff" />
<stop offset="1" stop-color="#0391c6" />
</linearGradient>
<path
d="m153.466 282.106-8.573 5.556-14.128-5.556 2.494 13.096-14.821 9.606 6.163 96.48h57.729l6.164-96.48-35.028-13.775z"
fill="url(#l)"
/>
<linearGradient
id="m"
x1="323.506"
x2="393.562"
y1="172.303"
y2="172.303"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#70e2ff" />
<stop offset="1" stop-color="#0391c6" />
</linearGradient>
<path
d="M358.534 291.033v-8.927l-8.572 5.556-14.129-5.556 2.494 13.096-14.821 9.606 6.164 96.48h57.729l6.163-96.48z"
fill="url(#m)"
/>
<linearGradient
id="n"
x1="152"
x2="380.57"
y1="293.47"
y2="293.47"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffdd7d" />
<stop offset="1" stop-color="#ff8945" />
</linearGradient>
<circle cx="358.53" cy="220.53" r="33.2" fill="url(#n)" />
<linearGradient
id="o"
x1="212.868"
x2="299.132"
y1="212.03"
y2="212.03"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffedba" />
<stop offset="1" stop-color="#ffc65c" />
</linearGradient>
<path d="M256 265.081h-43.132v73.779h86.264v-73.779z" fill="url(#o)" />
<linearGradient
id="p"
x1="110.333"
x2="196.598"
y1="212.03"
y2="212.03"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff94cc" />
<stop offset="1" stop-color="#ff39a1" />
</linearGradient>
<path d="M153.466 265.081h-43.133v73.779h86.265v-73.779z" fill="url(#p)" />
<path d="M358.534 265.081h-43.132v73.779h86.265v-73.779z" fill="#51946f" />
</svg>
More icons in the same style and category