Menu

Beta
Sign in
Beta
Speech Ribbon SVG element, flat

Speech Ribbon SVG element, flat

A small triangular tail points down from this long, rounded banner. It can frame a quote on a presentation slide or a note in a worksheet.

Free · from Ribbons and Banners, Flat · Set 2

Similar SVGs

More from Ribbons and Banners, Flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nQR-YdX9CgL3/amnt.svg" alt="Speech Ribbon" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="coral" data-name="Coral"><path d="M505 621c10-13 41-72 50-77 8-4 18-2 26-2 50 0 102 0 153 0 30 0 60 0 90 0 18 0 36 1 54 0 41-4 77-33 91-70 23-60-13-129-75-145-22-5-47-3-69-3-102 0-205 0-306 0-103 0-205 0-307 0-26 0-52-2-77 2-62 12-99 77-83 137 11 42 50 75 94 79 17 1 34 0 52 0 26 0 54 0 81 0 50 0 102 0 153 0 8 0 18-2 25 3 10 7 37 62 48 76z" fill="#fc664d" stroke="#fc664d"/></g><g id="navy" data-name="Navy"><path d="M144 309c-91 8-141 117-92 192 40 61 96 57 161 57 34 0 70 0 105 0 27 0 54 0 81 0 10 0 42-3 49 1 5 2 9 14 12 18 5 9 31 55 37 59 4 3 9 4 14 2 8-4 15-20 19-27s29-50 32-52c8-4 64-1 77-1 53 0 107 0 161 0 27 0 57 3 84-1 64-10 109-66 107-129-2-59-46-109-104-118-32-5-67-1-99-1-108 0-215 0-322 0-73 0-145 0-217 0-35 0-71-3-105 0zM505 621c-11-14-38-69-48-76-7-5-17-3-25-3-51 0-103 0-153 0-27 0-55 0-81 0-18 0-35 1-52 0-44-4-83-37-94-79-16-60 21-125 83-137 25-4 51-2 77-2 102 0 204 0 307 0 101 0 204 0 306 0 22 0 47-2 69 3 62 16 98 85 75 145-14 37-50 66-91 70-18 1-36 0-54 0-30 0-60 0-90 0-51 0-103 0-153 0-8 0-18-2-26 2-9 5-40 64-50 77z" fill="#022254" stroke="#022254"/></g></svg>
CSS background-image
.speech-ribbon {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nQR-YdX9CgL3/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.speech-ribbon {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/nQR-YdX9CgL3/amnt.svg") center / contain no-repeat;
}
React
import SpeechRibbonSvg from "./speech-ribbon.jsx"; // from the React tab above

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

Tags

speechribbonmessagecalloutribbonselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Speech Ribbon: Long rounded banner with a small triangular speech tail pointing downward. A flat element. as part of the pack Ribbons and Banners, Flat · Set 2. Want one like it? Make your own in the SVG studio.

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

Settings