Pennant Banner SVG element, flat

Free

Five triangular pennants hang from a gently curved line. This bunting suits party invitations and signs above a school fair booth.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

pennant banner bunting party ribbons element flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IGML3Lp1WehP/amnt.svg" alt="Pennant Banner" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" preserveAspectRatio="none" fill="currentColor"><path d="M15 25 Q200 55 385 25" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M35 29 Q64 34 93 38 L59 105 Z"/><path d="M103 39 Q132 43 161 45 L129 112 Z"/><path d="M171 46 Q200 47 229 46 L200 115 Z"/><path d="M239 45 Q268 43 297 39 L271 112 Z"/><path d="M307 38 Q336 34 365 29 L341 105 Z"/></svg>

CSS background-image

.pennant-banner {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IGML3Lp1WehP/amnt.svg");
  background-size: contain;
}

CSS mask-image (takes the text colour)

.pennant-banner {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IGML3Lp1WehP/amnt.svg") center / contain no-repeat;
}

React

import PennantBannerSvg from "./pennant-banner.jsx"; // from the React tab above

<PennantBannerSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Pennant Banner: Row of five triangular pennants hanging from a gently curved line. as part of the pack Ribbons and Banners, Flat. Want one like it? Make your own in the SVG studio.

Rest of Ribbons and Banners, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence