ampersand icon

ampersand from Material Design Icons by Pictogrammers · Filled · Apache-2.0 Free for personal and commercial use.

Name
ampersand
Set
Material Design Icons
Style
Filled
Viewbox
24×24
License
Apache 2.0
Aliases
and

The same icon in other sets

ampersandHuge IconsampersandSVG LogosampersandLucideampersandMyna UI IconsampersandPixelarticonsampersandTabler Icons

Use the ampersand icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.4 16.5c0-.9.3-1.8.8-2.6q.75-1.2 3-2.7c-.9-1.1-1.4-1.9-1.7-2.5c-.4-.7-.5-1.3-.5-2c0-1.5.4-2.6 1.3-3.5S9.4 2 10.9 2q1.95 0 3.3 1.2c.9.8 1.3 1.8 1.3 2.9c0 .8-.2 1.5-.6 2.2q-.6 1.05-2.1 2.1l-1.4 1.1l4.3 5.2c.6-1.2.9-2.4.9-3.9h2.2c0 2.3-.5 4.2-1.6 5.7l2.8 3.3h-3l-1.3-1.5c-.7.6-1.4 1-2.3 1.3s-1.8.5-2.7.5c-1.9 0-3.4-.5-4.6-1.5c-1.1-1.1-1.7-2.4-1.7-4.1m6.3 3.5q1.95 0 3.6-1.5l-4.7-5.7l-.4.3C7.7 14.2 7 15.3 7 16.5c0 1.1.3 1.9 1 2.5s1.5 1 2.7 1M8.5 6.7c0 .9.5 1.9 1.6 3.2l1.6-1.1q.9-.6 1.2-1.2c.2-.4.3-.9.3-1.4c0-.6-.2-1.1-.7-1.5c-.4-.4-1-.6-1.7-.6s-1.3.2-1.7.7s-.6 1.1-.6 1.9"/></svg>

React

import type { SVGProps } from "react";

export function MdiAmpersand(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.4 16.5c0-.9.3-1.8.8-2.6q.75-1.2 3-2.7c-.9-1.1-1.4-1.9-1.7-2.5c-.4-.7-.5-1.3-.5-2c0-1.5.4-2.6 1.3-3.5S9.4 2 10.9 2q1.95 0 3.3 1.2c.9.8 1.3 1.8 1.3 2.9c0 .8-.2 1.5-.6 2.2q-.6 1.05-2.1 2.1l-1.4 1.1l4.3 5.2c.6-1.2.9-2.4.9-3.9h2.2c0 2.3-.5 4.2-1.6 5.7l2.8 3.3h-3l-1.3-1.5c-.7.6-1.4 1-2.3 1.3s-1.8.5-2.7.5c-1.9 0-3.4-.5-4.6-1.5c-1.1-1.1-1.7-2.4-1.7-4.1m6.3 3.5q1.95 0 3.6-1.5l-4.7-5.7l-.4.3C7.7 14.2 7 15.3 7 16.5c0 1.1.3 1.9 1 2.5s1.5 1 2.7 1M8.5 6.7c0 .9.5 1.9 1.6 3.2l1.6-1.1q.9-.6 1.2-1.2c.2-.4.3-.9.3-1.4c0-.6-.2-1.1-.7-1.5c-.4-.4-1-.6-1.7-.6s-1.3.2-1.7.7s-.6 1.1-.6 1.9"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.4 16.5c0-.9.3-1.8.8-2.6q.75-1.2 3-2.7c-.9-1.1-1.4-1.9-1.7-2.5c-.4-.7-.5-1.3-.5-2c0-1.5.4-2.6 1.3-3.5S9.4 2 10.9 2q1.95 0 3.3 1.2c.9.8 1.3 1.8 1.3 2.9c0 .8-.2 1.5-.6 2.2q-.6 1.05-2.1 2.1l-1.4 1.1l4.3 5.2c.6-1.2.9-2.4.9-3.9h2.2c0 2.3-.5 4.2-1.6 5.7l2.8 3.3h-3l-1.3-1.5c-.7.6-1.4 1-2.3 1.3s-1.8.5-2.7.5c-1.9 0-3.4-.5-4.6-1.5c-1.1-1.1-1.7-2.4-1.7-4.1m6.3 3.5q1.95 0 3.6-1.5l-4.7-5.7l-.4.3C7.7 14.2 7 15.3 7 16.5c0 1.1.3 1.9 1 2.5s1.5 1 2.7 1M8.5 6.7c0 .9.5 1.9 1.6 3.2l1.6-1.1q.9-.6 1.2-1.2c.2-.4.3-.9.3-1.4c0-.6-.2-1.1-.7-1.5c-.4-.4-1-.6-1.7-.6s-1.3.2-1.7.7s-.6 1.1-.6 1.9"/></svg>
</template>

CSS

.icon-ampersand {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.4%2016.5c0-.9.3-1.8.8-2.6q.75-1.2%203-2.7c-.9-1.1-1.4-1.9-1.7-2.5c-.4-.7-.5-1.3-.5-2c0-1.5.4-2.6%201.3-3.5S9.4%202%2010.9%202q1.95%200%203.3%201.2c.9.8%201.3%201.8%201.3%202.9c0%20.8-.2%201.5-.6%202.2q-.6%201.05-2.1%202.1l-1.4%201.1l4.3%205.2c.6-1.2.9-2.4.9-3.9h2.2c0%202.3-.5%204.2-1.6%205.7l2.8%203.3h-3l-1.3-1.5c-.7.6-1.4%201-2.3%201.3s-1.8.5-2.7.5c-1.9%200-3.4-.5-4.6-1.5c-1.1-1.1-1.7-2.4-1.7-4.1m6.3%203.5q1.95%200%203.6-1.5l-4.7-5.7l-.4.3C7.7%2014.2%207%2015.3%207%2016.5c0%201.1.3%201.9%201%202.5s1.5%201%202.7%201M8.5%206.7c0%20.9.5%201.9%201.6%203.2l1.6-1.1q.9-.6%201.2-1.2c.2-.4.3-.9.3-1.4c0-.6-.2-1.1-.7-1.5c-.4-.4-1-.6-1.7-.6s-1.3.2-1.7.7s-.6%201.1-.6%201.9%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.4%2016.5c0-.9.3-1.8.8-2.6q.75-1.2%203-2.7c-.9-1.1-1.4-1.9-1.7-2.5c-.4-.7-.5-1.3-.5-2c0-1.5.4-2.6%201.3-3.5S9.4%202%2010.9%202q1.95%200%203.3%201.2c.9.8%201.3%201.8%201.3%202.9c0%20.8-.2%201.5-.6%202.2q-.6%201.05-2.1%202.1l-1.4%201.1l4.3%205.2c.6-1.2.9-2.4.9-3.9h2.2c0%202.3-.5%204.2-1.6%205.7l2.8%203.3h-3l-1.3-1.5c-.7.6-1.4%201-2.3%201.3s-1.8.5-2.7.5c-1.9%200-3.4-.5-4.6-1.5c-1.1-1.1-1.7-2.4-1.7-4.1m6.3%203.5q1.95%200%203.6-1.5l-4.7-5.7l-.4.3C7.7%2014.2%207%2015.3%207%2016.5c0%201.1.3%201.9%201%202.5s1.5%201%202.7%201M8.5%206.7c0%20.9.5%201.9%201.6%203.2l1.6-1.1q.9-.6%201.2-1.2c.2-.4.3-.9.3-1.4c0-.6-.2-1.1-.7-1.5c-.4-.4-1-.6-1.7-.6s-1.3.2-1.7.7s-.6%201.1-.6%201.9%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/ampersand.svg?color=%231a73e8&size=48