Sonos Playbar icon

cbi:sonos-playbar

The Sonos Playbar icon (cbi:sonos-playbar) is a free SVG icon from the Custom Brand Icons set by Emanuele & rchiileea. It is drawn on a 24 × 24 grid. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Custom Brand Icons
Author: Emanuele & rchiileea
License: CC-BY-NC-SA-4.0
Size: 24 × 24
Tags: sonosplaybar, sono

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m21.051 14.849l.02-.513a.06.06 0 0 1 .042-.054l.078-.02c.039-.01.073.02.071.059l-.013.509a.056.056 0 0 1-.045.055l-.083.022a.058.058 0 0 1-.07-.058m.021-.974v.157c0 .031.028.054.058.046l.12-.028a.05.05 0 0 0 .034-.045v-.15a.046.046 0 0 0-.055-.046l-.12.022c-.021.002-.037.023-.037.044m.858-.447l-.01-.019q.007.01.01.019m-.21.224l-.37.088c-.01-.01-.01-.02-.02-.03c-.03-.019-.06-.029-.089-.019l-.211.046c-.04.011-.08.04-.08.08l-2.365.567v-.081l3.125-.747c.01.01.01.01.01.021Zm0 .159l-.35.089v-.069l.35-.078Zm0 .171l-.358.089v-.069l.358-.091Zm0 .192l-.358.079v-.079l.358-.092Zm0 .187l-.358.08v-.088l.358-.08Zm0 .175l-.358.087v-.091l.358-.083Zm-.003.168l-.354.088l-.002-.09l.356-.084Zm0 .092l.003.075l-.39.097s.04-.067.04-.087m-.073.033c0 .032-.027.054-.046.054l-.179.049c-.021 0-.04 0-.051-.011a.1.1 0 0 1-.02-.049l.008-1.111c0-.038.016-.053.052-.066l.189-.04h.009c.045-.01.062.04.062.05Zm.402.073v.019a.18.18 0 0 1-.139.111l-2.785.764q-.09.015-.149-.03c-.02-.01-.03-.03-.04-.06c0 0-.01-.01-.01-.02c0 0 .01-.01.01-.02v.02c1.038-.262 2.075-.553 3.113-.815Zm-3.113.603l2.365-.613c0 .019.02.049.04.069l-2.405.635Zm0-.171l2.365-.613v.089l-2.365.604Zm0-.192l2.365-.599v.088l-2.365.592Zm0-.191l2.365-.579v.079l-2.365.602Zm0-.201l2.365-.576v.086l-2.365.591Zm0-.17l2.365-.568v.069l-2.365.569Zm0-.181l2.365-.562v.085l-2.365.557Zm.24-.423l2.704-.633c.02-.009.041-.009.05-.009q.045 0 .089.03l.01.01l.011.01l-3.084.723c.04-.059.119-.1.22-.131m2.962-.562c0-.01-.008-.03-.008-.04a.3.3 0 0 0-.111-.091c-.07-.029-.129-.019-.149-.019c-.908.21-1.817.421-2.714.633c-.12.039-.21.089-.26.17c-.01.01-.01.022-.01.029c-.01.01-.01.021-.01.032s0 .02-.01.04c0 .01 0 .02-.01.03l-.01 1.427l.01.07v.03c.03.07.06.111.11.122c.02.01.041.02.049.02c.05.019.1.01.13.01l2.785-.765a.23.23 0 0 0 .139-.079q.033-.046.049-.092c.012-.02.012-.03.012-.039l.029-1.408c-.01-.03-.01-.049-.02-.079m.129.138l-.039 1.376c0 .132-.09.252-.209.312l-2.945.784h-.02a.34.34 0 0 1-.238-.05c-.01-.01-.017-.008-.027-.018l-.027-.022l-.022-.027l-.022-.021c-.039-.051-.033-.093-.033-.154v-1.557c.02-.111.09-.302.41-.393l2.713-.633c.112-.02.459-.037.459.403M4.775 8.049c-.041-.01-.041-.069.01-.079l.437-.051l15.322 4.904l-.5.111c-.099.02-.2.02-.29-.01Zm16.966 5.005c-5.619-1.769-11.149-3.558-16.757-5.327a.2.2 0 0 0-.13-.01l-2.605.393A.29.29 0 0 0 2 8.401v1.207a.3.3 0 0 0 .189.281l.31.12l-.16-.201c-.02-.029.01-.08.05-.059l14.51 5.537c.08.03.149.08.189.161l.19.271l-14.843-5.79l.065.081l15.798 6.212l.038.015c.08.069.261.055.361.045l2.935-.834s.136-.034.216-.1c.109-.079.112-.201.112-.333l.04-1.376c0-.04.012-.476-.258-.584m-3.155 2.696v.022h-.01s.01-.012.01-.022"/></svg>

How to use the Sonos Playbar icon

React

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

<Icon icon="cbi:sonos-playbar" width="24" />

Vue

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

<template>
  <Icon icon="cbi:sonos-playbar" width="24" />
</template>

Svelte

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

<Icon icon="cbi:sonos-playbar" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[cbi--sonos-playbar]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/cbi -->
<div class="i-cbi:sonos-playbar"></div>

Web component

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

<iconify-icon icon="cbi:sonos-playbar"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/cbi/sonos-playbar.svg" alt="Sonos Playbar icon" width="24" height="24">

Related icons in Custom Brand Icons

Sonos Playbar icon FAQ

Is the Sonos Playbar icon free for commercial use?

No. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author.

How do I use the Sonos Playbar icon in React?

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

How do I add the Sonos Playbar icon to a web page?

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

Browse all Custom Brand Icons →