Angular icon
logos:angular
The Angular icon (logos:angular) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 125 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 512 × 125
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="125" viewBox="0 0 512 125"><defs><linearGradient id="SVGHgWfLdHW" x1="0%" x2="100%" y1="48.065%" y2="50.391%"><stop offset="0%" stop-color="#e847a3"/><stop offset="25.687%" stop-color="#da5af7"/><stop offset="33.759%" stop-color="#dd57f6"/><stop offset="56.442%" stop-color="#b848f4"/><stop offset="100%" stop-color="#8842f6"/></linearGradient><linearGradient id="SVGivbQwcdb" x1="36.615%" x2="33.292%" y1="41.656%" y2="100%"><stop offset="0%" stop-color="#e03440" stop-opacity=".2"/><stop offset="28.023%" stop-color="#e03440" stop-opacity=".62"/><stop offset="100%" stop-color="#e03440"/></linearGradient></defs><path fill="url(#SVGHgWfLdHW)" d="m116.028 20.477l-4.19 65.79L71.78 0zm-27.745 85.07l-30.269 17.271l-30.268-17.27l6.156-14.92h48.224zm-30.269-72.8l15.861 38.56H42.153zM4.147 86.267L0 20.477L44.248 0zM476.37 99.91V37.437h14.277v10.412h.65q1.709-5.409 5.878-8.358t9.537-2.949q1.221 0 2.746.102t2.542.305v13.544q-.935-.325-2.949-.59a30 30 0 0 0-3.884-.265q-4.026 0-7.22 1.73q-3.194 1.728-5.023 4.778q-1.83 3.051-1.83 7.037V99.91zm-29.917-63.287q4.515 0 8.99 1.058q4.473 1.058 8.174 3.477q3.7 2.42 5.96 6.57q2.256 4.148 2.256 10.37V99.91H457.68v-8.582h-.488q-1.343 2.604-3.762 4.861q-2.42 2.258-6.06 3.62t-8.522 1.362q-5.938 0-10.677-2.135t-7.483-6.325q-2.745-4.188-2.745-10.33q0-5.287 1.951-8.745a15.1 15.1 0 0 1 5.329-5.532q3.376-2.074 7.626-3.152a63 63 0 0 1 8.806-1.566l1.832-.193l2.123-.234q2.703-.306 4.715-.578l.238-.032q3.416-.467 4.982-1.464q1.565-.996 1.566-3.112v-.244q-.001-4.596-2.725-7.117q-2.726-2.523-7.85-2.523q-5.41 0-8.562 2.36t-4.25 5.572l-13.747-1.952q1.625-5.694 5.368-9.538q3.742-3.844 9.152-5.776q5.407-1.931 11.957-1.932m10.697 33.515q-.691.57-2.338 1.057a35 35 0 0 1-3.681.854q-1.627.294-3.228.534l-1.102.16l-3.154.445q-3.294.448-5.898 1.465t-4.108 2.827t-1.505 4.657q0 4.066 2.969 6.141q2.97 2.074 7.566 2.074q4.432 0 7.687-1.769q3.254-1.77 5.023-4.697q1.77-2.929 1.77-6.386zM400.752 99.91h14.724V16.612h-14.724zm-19.545-26.274V37.437h14.723V99.91h-14.276V88.807h-.651q-2.115 5.247-6.935 8.582t-11.856 3.335q-6.141 0-10.84-2.746t-7.34-8.012q-2.645-5.267-2.644-12.75v-39.78h14.723v37.5q0 5.94 3.254 9.437t8.541 3.497q3.253 0 6.305-1.586q3.05-1.586 5.023-4.738q1.912-3.058 1.97-7.624zm-77.912-37.013q5.49 0 9.05 1.85q3.558 1.852 5.674 4.434q2.114 2.584 3.213 4.86h.813v-10.33h14.52v63.49q0 8.013-3.823 13.26t-10.453 7.85t-15.048 2.603q-7.933 0-13.626-2.135q-5.695-2.137-9.152-5.715q-3.456-3.58-4.799-7.932l13.26-3.213q.893 1.83 2.603 3.641q1.708 1.81 4.616 3.01q2.909 1.2 7.341 1.2q6.264 0 10.372-3.03q4.108-3.031 4.108-9.945V88.685h-.732q-1.14 2.277-3.315 4.677q-2.177 2.4-5.735 4.027q-3.56 1.627-8.928 1.627q-7.2 0-13.035-3.397q-5.838-3.395-9.274-10.167q-3.437-6.772-3.437-16.982q0-10.29 3.437-17.387t9.294-10.779t13.056-3.681m4.067 12.08q-4.921 0-8.216 2.563q-3.294 2.562-4.961 7.016q-1.669 4.453-1.668 10.107q0 5.735 1.688 10.026t5.002 6.67t8.155 2.38q4.677 0 7.972-2.278t5.003-6.548q1.708-4.272 1.708-10.25q0-5.897-1.687-10.33q-1.689-4.434-4.962-6.895q-3.274-2.46-8.034-2.46m-72.668 14.602V99.91h-14.723V37.437h14.074v10.615h.731q2.155-5.246 6.894-8.337q4.738-3.091 11.735-3.092q6.466 0 11.287 2.766q4.818 2.766 7.483 8.012q2.598 5.12 2.624 12.368V99.91h-14.724v-37.5q0-6.263-3.234-9.802t-8.927-3.539q-3.863 0-6.854 1.688q-2.99 1.689-4.677 4.86q-1.632 3.068-1.687 7.388zM189.44 16.612l29.365 83.298h-16.106l-6.901-20.54H164.48l-6.888 20.54h-16.107l29.325-83.298zm-8.988 17.083h-.652L168.545 67.25h23.18z"/><path fill="url(#SVGivbQwcdb)" d="m88.283 105.548l-30.269 17.27l-30.268-17.27l6.156-14.92h48.224zM58.014 32.746l15.861 38.56H42.153zM4.147 86.267L0 20.477L44.248 0z"/></svg>How to use the Angular icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:angular" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:angular" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:angular" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--angular]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:angular"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:angular"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/angular.svg" alt="Angular icon" width="24" height="24">Related icons in SVG Logos
Angular icon in other icon sets
Angular icon FAQ
Is the Angular icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Angular icon in React?
Install @iconify/react and render <Icon icon="logos:angular" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Angular icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/angular.svg" alt="Angular icon">, or paste the SVG code inline to style it with CSS.