Add icons to this collection by clicking the heart icon.
Front End icon - also known as idea, marketing, gear, settings, website, management, developer, batch, digital marketing, debugging, and front end. Created in a clean flat style, 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="512"
height="512"
viewBox="0 0 64 64"
>
<path fill="#ccedff" d="M5 13v36h54V13a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1z" />
<circle cx="24" cy="30" r="3" fill="#2199ea" opacity=".2" />
<path
fill="#2199ea"
d="M47.087 20.051a7.993 7.993 0 0 0-5.938 12.075A18.287 18.287 0 0 1 44 41.566V45a4 4 0 0 0 8 0v-3.438a17.366 17.366 0 0 1 2.763-9.294 8 8 0 0 0-7.676-12.217zM37.026 28h-1.434a.992.992 0 0 1-.951-.764 10.942 10.942 0 0 0-1.172-2.828.959.959 0 0 1 .128-1.176l1.028-1.032a.975.975 0 0 0 0-1.378l-1.451-1.451a.975.975 0 0 0-1.378 0L30.768 20.4a.96.96 0 0 1-1.176.128 10.942 10.942 0 0 0-2.828-1.172.992.992 0 0 1-.764-.948v-1.434a.974.974 0 0 0-.974-.974h-2.052a.974.974 0 0 0-.974.974v1.434a.992.992 0 0 1-.764.951 10.942 10.942 0 0 0-2.828 1.172.96.96 0 0 1-1.176-.128L16.2 19.375a.975.975 0 0 0-1.378 0l-1.451 1.451a.975.975 0 0 0 0 1.378l1.029 1.028a.959.959 0 0 1 .128 1.176 10.942 10.942 0 0 0-1.172 2.828.992.992 0 0 1-.951.764h-1.431a.974.974 0 0 0-.974.974v2.052a.974.974 0 0 0 .974.974h1.434a.992.992 0 0 1 .951.764 10.942 10.942 0 0 0 1.172 2.828.959.959 0 0 1-.128 1.176L13.375 37.8a.975.975 0 0 0 0 1.378l1.451 1.451a.975.975 0 0 0 1.378 0l1.028-1.029a.959.959 0 0 1 1.176-.128 10.942 10.942 0 0 0 2.828 1.172.992.992 0 0 1 .764.951v1.434a.974.974 0 0 0 .974.974h2.052a.974.974 0 0 0 .974-.977v-1.434a.992.992 0 0 1 .764-.951 10.942 10.942 0 0 0 2.828-1.172.959.959 0 0 1 1.176.128l1.032 1.028a.975.975 0 0 0 1.378 0l1.451-1.451a.975.975 0 0 0 0-1.378L33.6 36.768a.959.959 0 0 1-.128-1.176 10.942 10.942 0 0 0 1.172-2.828.992.992 0 0 1 .948-.764h1.434a.974.974 0 0 0 .974-.974v-2.052a.974.974 0 0 0-.974-.974zm-7.8 6.991a1.142 1.142 0 0 1-.238.238 7.981 7.981 0 0 1-7.115 1.443 7.065 7.065 0 0 1-4.516-4.446 6.886 6.886 0 0 1 5.068-9.055 7.2 7.2 0 0 1 3.556.114 7.066 7.066 0 0 1 4.659 4.5 7.967 7.967 0 0 1-1.41 7.206z"
opacity=".2"
/>
<path
fill="#fff"
d="M7.523 49h5L47 12h-5zM16.523 49h5L56 12h-5z"
opacity=".4"
/>
<path fill="#2199ea" d="M4 53h56a2 2 0 0 0 2-2v-2H2v2a2 2 0 0 0 2 2z" />
<path
fill="#148cde"
d="M60 51H4a2 2 0 0 1-2-2v2a2 2 0 0 0 2 2h56a2 2 0 0 0 2-2v-2a2 2 0 0 1-2 2z"
/>
<path fill="#ededed" d="M43 42h8v3h-8z" />
<path fill="#d6d6d6" d="M47 49a4 4 0 0 0 4-4h-8a4 4 0 0 0 4 4z" />
<path
fill="#ffb26c"
d="M46.087 20.051a7.993 7.993 0 0 0-5.938 12.075A18.287 18.287 0 0 1 43 41.566V42h2v-8l-2-4 1-1 3 1 3-1 1 1-2 4v8h2v-.438a17.366 17.366 0 0 1 2.763-9.294 8 8 0 0 0-7.676-12.217z"
/>
<path fill="#ffa154" d="m49 34 2-4-1-1-3 1-3-1-1 1 2 4v8h4z" />
<path
fill="#fc4949"
d="M34.592 32h1.433a.974.974 0 0 0 .975-.975v-2.05a.974.974 0 0 0-.975-.975h-1.433a.992.992 0 0 1-.951-.764 10.942 10.942 0 0 0-1.172-2.828.959.959 0 0 1 .128-1.176l1.028-1.032a.975.975 0 0 0 0-1.378l-1.451-1.451a.975.975 0 0 0-1.378 0L29.768 20.4a.959.959 0 0 1-1.176.128 10.942 10.942 0 0 0-2.828-1.172.992.992 0 0 1-.764-.948v-1.433a.974.974 0 0 0-.975-.975h-2.051a.974.974 0 0 0-.974.975v1.433a.992.992 0 0 1-.764.951 10.942 10.942 0 0 0-2.828 1.172.959.959 0 0 1-1.176-.128L15.2 19.375a.975.975 0 0 0-1.378 0l-1.451 1.451a.975.975 0 0 0 0 1.378l1.029 1.028a.959.959 0 0 1 .128 1.176 10.942 10.942 0 0 0-1.172 2.828.992.992 0 0 1-.951.764H9.974a.974.974 0 0 0-.974.975v2.05a.974.974 0 0 0 .974.975h1.434a.992.992 0 0 1 .951.764 10.942 10.942 0 0 0 1.172 2.828.959.959 0 0 1-.128 1.176L12.375 37.8a.975.975 0 0 0 0 1.378l1.451 1.451a.975.975 0 0 0 1.378 0l1.028-1.029a.959.959 0 0 1 1.176-.128 10.942 10.942 0 0 0 2.828 1.172.992.992 0 0 1 .764.951v1.433a.974.974 0 0 0 .974.975h2.051a.974.974 0 0 0 .975-.978v-1.433a.992.992 0 0 1 .764-.951 10.942 10.942 0 0 0 2.828-1.172.959.959 0 0 1 1.176.128l1.032 1.028a.975.975 0 0 0 1.378 0l1.451-1.451a.975.975 0 0 0 0-1.378L32.6 36.768a.959.959 0 0 1-.128-1.176 10.942 10.942 0 0 0 1.172-2.828.992.992 0 0 1 .948-.764zm-6.629 3.2a4.8 4.8 0 0 1-.364.317 7.6 7.6 0 0 1-4.234 1.465 6.93 6.93 0 0 1-2.514-.317 7.066 7.066 0 0 1-4.507-4.489 7.4 7.4 0 0 1-.109-4.031 7.868 7.868 0 0 1 1.082-2.551 5.187 5.187 0 0 1 2.169-1.732 8.43 8.43 0 0 1 1.853-.67 7.21 7.21 0 0 1 3.491.051 7.06 7.06 0 0 1 4.708 4.251 7.241 7.241 0 0 1 .186 4.448 7 7 0 0 1-1.761 3.258z"
/>
<circle cx="23" cy="30" r="3" fill="#fc4949" />
<path
fill="#ffb775"
d="M46.087 20.051c-.218.024-.425.084-.637.126a4.292 4.292 0 0 0 .672 4.763c1.647 2.032 4.505 2.669 6.384 1.422a3.39 3.39 0 0 0 1.462-2.283 7.994 7.994 0 0 0-7.881-4.028z"
/>
<ellipse
cx="49.853"
cy="23.679"
fill="#ffcb9c"
rx="1.5"
ry="2"
transform="rotate(-55.3 49.871 23.686)"
/>
<path
fill="#f93232"
d="M32.988 25.431a14.8 14.8 0 0 1-14.557 14.557 11.309 11.309 0 0 0 1.864.666.958.958 0 0 1 .7.935v1.436a.974.974 0 0 0 .974.975h2.051a.974.974 0 0 0 .98-.975v-1.433a.992.992 0 0 1 .764-.951 10.942 10.942 0 0 0 2.828-1.172.959.959 0 0 1 1.176.128l1.032 1.028a.975.975 0 0 0 1.378 0l1.451-1.451a.975.975 0 0 0 0-1.378L32.6 36.768a.959.959 0 0 1-.128-1.176 10.942 10.942 0 0 0 1.172-2.828.992.992 0 0 1 .948-.764h1.433a.974.974 0 0 0 .975-.975v-2.05a.974.974 0 0 0-.975-.975h-1.436a.958.958 0 0 1-.935-.7 11.309 11.309 0 0 0-.666-1.869zM24.554 27.446A2.965 2.965 0 0 1 25 29a3 3 0 0 1-3 3 2.965 2.965 0 0 1-1.554-.446 2.992 2.992 0 1 0 4.108-4.108z"
/>
<g fill="#2199ea">
<path
d="M30.988 46.559a1.008 1.008 0 0 1 .5-1.295l.155-.077a1.006 1.006 0 0 1 1.337.378 1 1 0 0 1-.418 1.4c-.07.036-.14.071-.211.1a1 1 0 0 1-1.363-.506zM35.3 43.978a1.007 1.007 0 0 1 .126-1.384 17.242 17.242 0 0 0 3.356-4.183 1.009 1.009 0 0 1 1.324-.423 1.008 1.008 0 0 1 .412 1.412 19.254 19.254 0 0 1-3.751 4.675 1.009 1.009 0 0 1-1.467-.097z"
opacity=".2"
/>
<rect width="2" height="4" x="47" y="14" opacity=".2" rx=".999" />
<rect
width="3.606"
height="2"
x="52.197"
y="16.5"
opacity=".2"
rx=".999"
transform="rotate(-56.29 54.015 17.49)"
/>
<rect
width="2"
height="3.606"
x="41"
y="15.697"
opacity=".2"
rx=".999"
transform="rotate(-33.7 41.98 17.488)"
/>
</g>
<path
fill="#f77f1b"
d="M50 42h-2v-8a1 1 0 0 1 .1-.447l1.683-3.353-.054-.053-2.413.805a1 1 0 0 1-.632 0l-2.413-.805-.054.053 1.683 3.353A1 1 0 0 1 46 34v8h-2v-7.764l-1.9-3.789a1 1 0 0 1 .188-1.154l1-1a1 1 0 0 1 1.023-.242l2.684.9 2.684-.9a1 1 0 0 1 1.023.242l1 1a1 1 0 0 1 .188 1.154L50 34.236z"
/>
<path
fill="#f93232"
d="M29.988 46.559a1.008 1.008 0 0 1 .5-1.295l.155-.077a1.006 1.006 0 0 1 1.337.378 1 1 0 0 1-.418 1.4c-.07.036-.14.071-.211.1a1 1 0 0 1-1.363-.506zM34.3 43.978a1.007 1.007 0 0 1 .126-1.384 17.242 17.242 0 0 0 3.356-4.183 1.009 1.009 0 0 1 1.324-.423 1.008 1.008 0 0 1 .412 1.412 19.254 19.254 0 0 1-3.751 4.675 1.009 1.009 0 0 1-1.467-.097z"
/>
<rect width="2" height="4" x="46" y="14" fill="#ffb26c" rx=".999" />
<rect
width="3.606"
height="2"
x="51.197"
y="16.5"
fill="#ffb26c"
rx=".999"
transform="rotate(-56.29 53.015 17.49)"
/>
<rect
width="2"
height="3.606"
x="40"
y="15.697"
fill="#ffb26c"
rx=".999"
transform="rotate(-33.7 40.98 17.488)"
/>
<circle cx="32" cy="15" r="1" fill="#148cde" />
</svg>
More icons in the same style and category