gentleface

Gentleface › Text & formatting › quote

quote icon

Quote: quote, blockquote, quotation, citation. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.956 7.294C6.985 7.36 7 7.428 7 7.5L7 8.5C7 8.945 6.918 9.375 6.754 9.788C6.576 10.238 6.317 10.633 5.975 10.975C5.633 11.317 5.238 11.576 4.788 11.754C4.375 11.918 3.945 12 3.5 12C3.359 12 3.241 11.952 3.144 11.856C3.048 11.759 3 11.641 3 11.5C3 11.359 3.048 11.241 3.144 11.144C3.241 11.048 3.359 11 3.5 11C3.818 11 4.125 10.941 4.42 10.824C4.741 10.697 5.024 10.512 5.268 10.268C5.512 10.024 5.697 9.741 5.824 9.42C5.941 9.125 6 8.818 6 8.5L6 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L6 3C6.276 3 6.512 3.098 6.707 3.293C6.902 3.488 7 3.724 7 4L7 7C7 7.1 6.985 7.198 6.956 7.294ZM14.956 7.294C14.985 7.36 15 7.428 15 7.5L15 8.5C15 8.945 14.918 9.375 14.754 9.788C14.576 10.238 14.317 10.633 13.975 10.975C13.633 11.317 13.238 11.576 12.788 11.754C12.375 11.918 11.945 12 11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5C11 11.359 11.048 11.241 11.144 11.144C11.241 11.048 11.359 11 11.5 11C11.818 11 12.125 10.941 12.42 10.824C12.741 10.697 13.024 10.512 13.268 10.268C13.512 10.024 13.697 9.741 13.824 9.42C13.941 9.125 14 8.818 14 8.5L14 8L10 8C9.724 8 9.488 7.902 9.293 7.707C9.098 7.512 9 7.276 9 7L9 4C9 3.724 9.098 3.488 9.293 3.293C9.488 3.098 9.724 3 10 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 7C15 7.1 14.985 7.198 14.956 7.294Z"/></svg>
React
// Gentleface "quote" (line-round), MIT. https://gentleface.com/icons/quote
import type { SVGProps } from 'react';

export function QuoteIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6.956 7.294C6.985 7.36 7 7.428 7 7.5L7 8.5C7 8.945 6.918 9.375 6.754 9.788C6.576 10.238 6.317 10.633 5.975 10.975C5.633 11.317 5.238 11.576 4.788 11.754C4.375 11.918 3.945 12 3.5 12C3.359 12 3.241 11.952 3.144 11.856C3.048 11.759 3 11.641 3 11.5C3 11.359 3.048 11.241 3.144 11.144C3.241 11.048 3.359 11 3.5 11C3.818 11 4.125 10.941 4.42 10.824C4.741 10.697 5.024 10.512 5.268 10.268C5.512 10.024 5.697 9.741 5.824 9.42C5.941 9.125 6 8.818 6 8.5L6 8L2 8C1.724 8 1.488 7.902 1.293 7.707C1.098 7.512 1 7.276 1 7L1 4C1 3.724 1.098 3.488 1.293 3.293C1.488 3.098 1.724 3 2 3L6 3C6.276 3 6.512 3.098 6.707 3.293C6.902 3.488 7 3.724 7 4L7 7C7 7.1 6.985 7.198 6.956 7.294ZM14.956 7.294C14.985 7.36 15 7.428 15 7.5L15 8.5C15 8.945 14.918 9.375 14.754 9.788C14.576 10.238 14.317 10.633 13.975 10.975C13.633 11.317 13.238 11.576 12.788 11.754C12.375 11.918 11.945 12 11.5 12C11.359 12 11.241 11.952 11.144 11.856C11.048 11.759 11 11.641 11 11.5C11 11.359 11.048 11.241 11.144 11.144C11.241 11.048 11.359 11 11.5 11C11.818 11 12.125 10.941 12.42 10.824C12.741 10.697 13.024 10.512 13.268 10.268C13.512 10.024 13.697 9.741 13.824 9.42C13.941 9.125 14 8.818 14 8.5L14 8L10 8C9.724 8 9.488 7.902 9.293 7.707C9.098 7.512 9 7.276 9 7L9 4C9 3.724 9.098 3.488 9.293 3.293C9.488 3.098 9.724 3 10 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 7C15 7.1 14.985 7.198 14.956 7.294Z" />
    </svg>
  );
}
Vue
Vue: see /icons/quote.md
Svelte
Svelte: see /icons/quote.md
HTML img
HTML img: see /icons/quote.md
CSS
CSS: see /icons/quote.md
Data URL
Data URL: see /icons/quote.md
Sprite
Sprite: see /icons/quote.md
SwiftUI
SwiftUI: see /icons/quote.md
Compose
Compose: see /icons/quote.md
Android XML
Android XML: see /icons/quote.md
Flutter
Flutter: see /icons/quote.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
quote, blockquote, quotation, citation, block quote
Alternatives
  • quote-round: rounded quotation marks instead of the default drawing; pick one per product
  • message-quote: a customer quote or a testimonial (testimonial)
Also fits
  • quote reply: a blockquote in text formatting
Tags
quote, quotation-marks, blockquote, citation, testimonial
Category
Text & formatting
Component name
QuoteIcon
History
  • added

Family 1

quote-round

More text & formatting icons

align-center align-justify align-left align-right asterisk bold border-all border-bottom border-inner border-left border-none border-right border-top case-lower case-sensitive checklist · all text & formatting icons

For agents

Metadata: /icons/quote.json · Markdown: /icons/quote.md · SVG: https://gentleface.com/svg/{style}/16/quote.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/quote.png

Feedback