Pepsi icon

thesvg-color:pepsi

The Pepsi icon (thesvg-color:pepsi) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 576 × 133 grid. theSVG Color icons are released under the MIT 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: theSVG Color
Author: thesvg.org
License: MIT
Size: 576 × 133

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="576" height="133" viewBox="0 0 576 133"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#28458e" d="M155.234 102.004h13.325c5.199 0 7.176 1.794 7.176 6.188c0 4.231-1.978 6.023-7.176 6.023h-13.325zm-20.643 44.443h20.644v-18.072h22.112c14.64 0 19.911-8.624 19.911-19.774c0-12.943-5.42-20.267-20.06-20.267h-42.607zm69.475-58.113h55.561v14.159H224.71v7.814h32.432v14.165H224.71v7.813h34.917v14.162h-55.561zm84.846 13.67h13.324c5.198 0 7.176 1.794 7.176 6.188c0 4.231-1.978 6.023-7.176 6.023h-13.324zm-20.644 44.443h20.644v-18.072h22.108c14.644 0 19.916-8.624 19.916-19.774c0-12.943-5.42-20.267-20.063-20.267h-42.605zm82.65-24.662c-10.101-1.712-14.271-8.223-14.271-16.36c0-15.06 13.251-19.126 30.231-19.126c23.277 0 32.869 6.753 33.602 19.045h-24.013c0-2.361-1.245-3.829-3.145-4.642c-1.831-.893-4.172-1.218-6.444-1.218c-6.149 0-8.27 1.707-8.27 4.151c0 1.625.656 2.687 2.706 3.011l24.67 4.068c10.397 1.709 16.84 7.081 16.84 16.927c0 14.167-10.396 20.841-33.604 20.841c-15.885 0-33.236-2.441-33.308-19.534h24.89c.07 1.951.732 3.253 2.198 4.149c1.533.815 3.804 1.223 7.024 1.223c6.441 0 8.201-1.955 8.201-4.723c0-1.709-.954-3.417-3.73-3.903zm58.638-33.451h20.643v58.113h-20.643zm97.15 35.486c-1.318 7.651-3.664 13.837-8.789 18.068c-5.048 4.233-12.957 6.594-25.546 6.594c-12.518 0-35.725-.979-35.725-31.09c0-30.117 23.207-31.094 35.725-31.094c12.442 0 31.624 1.789 34.335 24.826h-23.28c-.586-4.155-3.079-10.177-11.055-10.177c-8.423 0-13.766 4.639-13.766 16.444c0 11.802 5.199 16.438 12.739 16.438c6.517 0 10.397-3.011 12.081-10.01zm27.011-6.427c0-11.806 5.346-16.444 13.766-16.444c8.417 0 13.764 4.639 13.764 16.444c0 11.802-5.347 16.438-13.764 16.438c-8.42-.001-13.766-4.637-13.766-16.438m-21.964 0c0 30.11 23.207 31.09 35.729 31.09c12.519 0 35.726-.979 35.726-31.09c0-30.117-23.207-31.094-35.726-31.094c-12.522 0-35.729.976-35.729 31.094M103.397 88.91c1.333-27.881-22.711-59.279-55.49-63.16l.056-.381c32.315 0 57.088 29.916 57.088 53.517c-.031 4.913-.419 7.957-1.111 10.167zm-1.958 3.544c-2.15 2.627-4.854 5.272-8.022 7.783c-5.828-33.519-30.459-62.829-47.873-71.384l-.373.26c17.513 14.373 38.401 42.288 46.524 72.439a68 68 0 0 1-13.341 7.64C61.828 90.346 46.421 54 41.456 30.936l-.505.152c.112 22.388 16.007 60.394 35.391 78.939a66.8 66.8 0 0 1-13.786 3.809c-18.581-7.361-31.807-30.937-31.807-55.088c0-15.766 4.807-25.519 5.737-27.515l-.396-.157c-1.125 1.702-8.167 11.45-8.167 28.471c0 27.299 13.463 48.165 31.337 54.736a61.5 61.5 0 0 1-19.152-.899l-.133.416c1.912.704 8.399 3.427 18.295 3.427c22.383 0 37.514-13.907 43.605-24.478z"/><path fill="#0096d6" d="M56.032 15.518c-16.968 0-36.864 12.246-36.864 23.44c0 4.33 3.961 7.988 12.159 7.988c19.031 0 36.712-13.075 36.712-23.242c0-5.35-5.138-8.186-12.007-8.186m6.774 7.87c0 8.57-16.457 19.046-30.214 19.046c-6.078 0-9.362-2.392-9.362-6.339c0-8.693 16.644-18.991 29.548-18.991c8.413 0 10.028 4.281 10.028 6.284"/><path fill="#eb7b30" d="M12.408 44.141c-.477.825-2.387 4.565-2.387 8.397c0 7.107 7.181 13.705 20.389 13.705c25.409 0 54.765-18.703 54.765-36.064c0-7.793-7.377-12.03-12.499-12.906l-.096.304c1.593.504 7.429 3.217 7.429 10.159c0 13.833-25.919 32.681-51.737 32.681c-9.884 0-16.111-4.879-16.111-11.986c0-2.248.468-3.729.592-4.158z"/><path fill="#00984a" d="M95.651 31.477c.697.529 4.882 4.017 4.882 10.613c0 22.49-35.238 44.605-66.391 44.605c-18.578 0-27.047-9.173-26.672-17.318h.333c.728 4.23 6.76 11.799 23.02 11.799c31.192 0 66.019-22.883 66.019-42.932c0-3.439-.934-5.582-1.462-6.535z"/><path fill="#df002c" d="M107.429 52.473c.146.479.905 2.632.905 6.004c0 25.018-35.661 46.436-66.676 46.436c-15.963 0-24.299-7.754-26.059-10.903l.284-.21c4.417 3.863 13.117 6.798 23.27 6.798c27.392 0 68.265-20.84 67.9-48.034z"/></g></svg>

How to use the Pepsi icon

React

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

<Icon icon="thesvg-color:pepsi" width="24" />

Vue

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

<template>
  <Icon icon="thesvg-color:pepsi" width="24" />
</template>

Svelte

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

<Icon icon="thesvg-color:pepsi" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--pepsi]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:pepsi"></div>

Web component

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

<iconify-icon icon="thesvg-color:pepsi"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/thesvg-color/pepsi.svg" alt="Pepsi icon" width="24" height="24">

Related icons in theSVG Color

Pepsi icon in other icon sets

Pepsi icon FAQ

Is the Pepsi icon free for commercial use?

Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Pepsi icon in React?

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

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

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

Browse all theSVG Color icons →