Less icon
logos:less
The Less icon (logos:less) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 110 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
- 256 × 110
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="110" viewBox="0 0 256 110"><defs><path id="SVGemQR9biq" d="M224.236 88.738c0 11.564-9.688 21.025-21.529 21.025H21.75c-11.841 0-21.529-9.461-21.529-21.025V21.781C.221 10.218 9.909.756 21.75.756h180.957c11.841 0 21.529 9.462 21.529 21.025z"/><path id="SVGKEf7ie8Z" d="M-15.94.496H240V110H-15.94"/><linearGradient id="SVGusBLfcyb" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2e4f82"/><stop offset="100%" stop-color="#182e4d"/></linearGradient></defs><g fill="none" fill-rule="evenodd" transform="translate(16)"><use fill="url(#SVGusBLfcyb)" href="#SVGemQR9biq"/><mask id="SVGpEuNrbig" fill="#fff"><use href="#SVGKEf7ie8Z"/></mask><use href="#SVGKEf7ie8Z"/><path fill="#faf9f8" d="M229.071 40.43c0-8.197 1.261-13.031 1.261-21.858c0-13.662-5.045-18.076-16.184-18.076h-8.197v9.668h2.522c5.675 0 6.936 1.892 6.936 8.828c0 6.515-.631 13.031-.631 20.598c0 9.668 3.153 13.451 9.458 14.922v.631c-6.305 1.471-9.458 5.255-9.458 14.923c0 7.566.631 13.662.631 20.598c0 7.146-1.471 9.037-6.936 9.037v.21h-2.522V110h8.197c11.139 0 16.184-4.414 16.184-18.075c0-9.038-1.261-13.662-1.261-21.859c0-4.414 2.732-9.038 10.929-9.458v-10.93c-8.197-.21-10.929-4.834-10.929-9.248" mask="url(#SVGpEuNrbig)"/><path fill="#faf9f8" d="M135.961 53.251c-6.516-2.522-12.401-3.993-12.401-8.197c0-3.152 2.522-5.044 7.146-5.044s8.828 1.892 13.452 5.255l8.407-11.14c-5.255-3.993-12.401-8.197-22.069-8.197c-14.292 0-23.961 8.197-23.961 19.757c0 10.299 9.038 15.553 16.605 18.496c6.515 2.522 12.821 4.624 12.821 8.827c0 3.153-2.523 5.255-8.197 5.255c-5.255 0-10.509-2.102-16.184-6.516l-8.197 12.191c6.305 5.254 15.973 8.827 23.96 8.827c16.815 0 25.852-8.827 25.852-20.387s-9.037-16.394-17.234-19.127" mask="url(#SVGpEuNrbig)"/><path fill="#faf9f8" d="M186.824 53.251c-6.305-2.522-12.19-3.993-12.19-8.197c0-3.152 2.522-5.044 7.146-5.044s8.828 1.892 13.452 5.255l8.407-11.14c-5.255-3.993-12.401-8.197-22.069-8.197c-14.293 0-23.961 8.197-23.961 19.757c0 10.299 9.038 15.553 16.604 18.496c6.516 2.522 12.821 4.624 12.821 8.827c0 3.153-2.522 5.255-8.197 5.255c-5.254 0-10.509-2.102-16.183-6.516l-8.408 12.191c6.306 5.254 15.974 8.827 23.961 8.827c16.814 0 25.852-8.827 25.852-20.387s-9.038-16.394-17.235-19.127" mask="url(#SVGpEuNrbig)"/><path fill="#faf9f8" d="M61.977 52.2c1.261-8.407 6.305-12.4 12.19-12.4c7.567 0 10.51 5.254 10.51 12.4zm38.673 3.784c.21-17.025-9.038-30.266-26.693-30.266c-15.343 0-30.055 12.821-29.635 32.998c0 20.808 13.662 32.998 31.737 32.998c7.567 0 15.974-2.732 22.489-7.146l-6.305-11.139c-4.624 2.732-9.038 3.993-13.662 3.993c-8.407 0-14.923-3.993-16.604-13.662h38.043c.21-1.471.63-4.413.63-7.776" mask="url(#SVGpEuNrbig)"/><path fill="#faf9f8" d="M43.271 77.002c-1.471 0-3.363-1.261-3.363-5.255V.496H10.062C-1.287.496-6.332 4.91-6.332 18.572c0 9.037 1.261 14.082 1.261 21.858c0 4.414-2.732 9.038-10.929 9.458v10.93c8.197.21 10.929 4.834 10.929 9.248c0 7.777-1.261 12.4-1.261 21.438c0 13.662 5.045 18.076 16.184 18.076h8.197v-9.669h-2.522c-5.254 0-6.936-2.101-6.936-9.037s.631-12.821.631-20.598c0-9.668-3.153-13.452-9.459-14.923v-.63c6.306-1.472 9.459-5.255 9.459-14.923c0-7.567-.631-13.662-.631-20.598s1.471-8.827 6.936-8.827h5.675v60.321c0 12.821 4.414 21.229 17.235 21.229c3.993 0 7.146-.631 9.458-1.472l-2.102-13.661c-1.261.21-1.891.21-2.522.21" mask="url(#SVGpEuNrbig)"/></g></svg>
How to use the Less icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:less" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:less" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:less" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--less]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:less"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:less"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/logos/less.svg" alt="Less icon" width="24" height="24">
Less icon in other icon sets
Less icon FAQ
Is the Less 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 Less icon in React?
Install @iconify/react and render <Icon icon="logos:less" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Less icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/less.svg" alt="Less icon">, or paste the SVG code inline to style it with CSS.
Browse all SVG Logos icons →
ICONYZ
