Add icons to this collection by clicking the heart icon.
Family icon - also known as people, love, family, son, mother, father, and parents. Created in a clean gradient style with a white and olive 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="#7daf93" />
<stop offset="1" stop-color="#006941" />
</linearGradient>
<circle cx="256" cy="256" r="256" fill="url(#a)" />
<linearGradient
id="b"
x1="282.479"
x2="369.383"
y1="157.582"
y2="157.582"
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="M324.653 299.005v-5.751l-7.622 3.464-11.548-3.464 1.236 8.151-24.24 11.019 6.939 107.159h73.025l6.94-107.159z"
fill="url(#b)"
/>
<linearGradient
id="c"
x1="231.359"
x2="395"
y1="242.065"
y2="242.065"
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="m359.977 253.444 13.923-58.868H267.143l-35.784 84.404 74.124 70.314H395z"
fill="url(#c)"
/>
<linearGradient
id="d"
x1="144.455"
x2="233.915"
y1="376.854"
y2="376.854"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ce5011" />
<stop offset="1" stop-color="#6b2a22" />
</linearGradient>
<path
d="M189.185 181.876c-24.664 0-44.73-20.066-44.73-44.73s20.065-44.73 44.73-44.73c24.664 0 44.73 20.066 44.73 44.73s-20.066 44.73-44.73 44.73z"
fill="url(#d)"
/>
<linearGradient
id="e"
x1="279.923"
x2="369.383"
y1="375.386"
y2="375.386"
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="M324.653 183.344c-24.664 0-44.73-20.066-44.73-44.73s20.065-44.73 44.73-44.73 44.73 20.066 44.73 44.73c0 24.664-20.066 44.73-44.73 44.73z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="141.26"
x2="237.11"
y1="161.552"
y2="161.552"
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="M189.185 294.204v-2.5l-3.344 1.337-22.216-7.727 2.939 15.438-25.304 10.122 6.94 108.709h76.219l12.691-108.709z"
fill="url(#f)"
/>
<linearGradient
id="g"
x1="131"
x2="233.59"
y1="261.275"
y2="261.275"
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="M256.919 310.874h-37.381l-20.768-58.149 20.768-58.149h37.381v116.298z"
fill="url(#g)"
/>
<linearGradient
id="h"
x1="131"
x2="233.59"
y1="261.275"
y2="261.275"
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="M122.09 194.576h36.742l20.768 58.149-20.768 58.149H122.09V194.576z"
fill="url(#h)"
/>
<path d="M189.185 194.576h-30.352v116.298h60.704V194.576z" fill="#f3edee" />
<linearGradient
id="i"
x1="217.48"
x2="296.358"
y1="161.512"
y2="161.512"
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.919 295.445v-10.051l-9.652 6.255-15.908-6.255 2.808 14.745-16.687 10.815 6.939 108.629h64.999l6.94-108.629z"
fill="url(#i)"
/>
<circle cx="256.92" cy="216.06" r="37.38" fill="#ce5011" />
<linearGradient
id="j"
x1="208.355"
x2="305.483"
y1="206.241"
y2="206.241"
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.919 266.224h-48.564v83.07h97.128v-83.07z" fill="url(#j)" />
</svg>
More icons in the same style and category