Preact icon

logos:preact

The Preact icon (logos:preact) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 296 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 × 296

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="296" viewBox="0 0 256 296"><path fill="#673ab8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"/><path fill="#fff" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126m7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923s48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148s3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147"/><path fill="#fff" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648s12.169 70.238 63.224 110.126s105.133 56.485 122.15 34.704m-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442s42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254"/><path fill="#fff" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604s-8.776-19.603-19.603-19.603s-19.604 8.777-19.604 19.603s8.777 19.604 19.604 19.604"/></svg>

How to use the Preact icon

React

import { Icon } from "@iconify/react";

<Icon icon="logos:preact" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="logos:preact" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="logos:preact" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--preact]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:preact"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="logos:preact"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/logos/preact.svg" alt="Preact icon" width="24" height="24">

Preact icon in other icon sets

Preact icon FAQ

Is the Preact 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 Preact icon in React?

Install @iconify/react and render <Icon icon="logos:preact" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Preact icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/preact.svg" alt="Preact icon">, or paste the SVG code inline to style it with CSS.

Browse all SVG Logos icons →