afterpay logo
afterpay from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- afterpay
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
Use the afterpay logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12c0 6.628 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m1.236 4.924a2.2 2.2 0 0 1 1.15.299l4.457 2.557c1.495.857 1.495 3.013 0 3.87l-4.457 2.558c-1.488.854-3.342-.22-3.342-1.935v-.34a.441.441 0 0 0-.66-.383L6.287 13.9a.441.441 0 0 0 0 .765l4.096 2.35a.44.44 0 0 0 .661-.382v-.685c0-.333.36-.542.649-.376l1.041.597a.44.44 0 0 1 .222.383v.29c0 1.715-1.854 2.789-3.342 1.935L5.157 16.22c-1.495-.857-1.495-3.013 0-3.87l4.457-2.558c1.488-.854 3.342.22 3.342 1.935v.34c0 .34.366.551.66.383l4.097-2.35a.441.441 0 0 0 0-.765l-4.096-2.351a.441.441 0 0 0-.661.382v.685c0 .333-.36.541-.649.375l-1.041-.597a.44.44 0 0 1-.222-.383v-.29c0-1.285 1.043-2.21 2.192-2.233z"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsAfterpay(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="M12 0C5.373 0 0 5.373 0 12c0 6.628 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m1.236 4.924a2.2 2.2 0 0 1 1.15.299l4.457 2.557c1.495.857 1.495 3.013 0 3.87l-4.457 2.558c-1.488.854-3.342-.22-3.342-1.935v-.34a.441.441 0 0 0-.66-.383L6.287 13.9a.441.441 0 0 0 0 .765l4.096 2.35a.44.44 0 0 0 .661-.382v-.685c0-.333.36-.542.649-.376l1.041.597a.44.44 0 0 1 .222.383v.29c0 1.715-1.854 2.789-3.342 1.935L5.157 16.22c-1.495-.857-1.495-3.013 0-3.87l4.457-2.558c1.488-.854 3.342.22 3.342 1.935v.34c0 .34.366.551.66.383l4.097-2.35a.441.441 0 0 0 0-.765l-4.096-2.351a.441.441 0 0 0-.661.382v.685c0 .333-.36.541-.649.375l-1.041-.597a.44.44 0 0 1-.222-.383v-.29c0-1.285 1.043-2.21 2.192-2.233z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12c0 6.628 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m1.236 4.924a2.2 2.2 0 0 1 1.15.299l4.457 2.557c1.495.857 1.495 3.013 0 3.87l-4.457 2.558c-1.488.854-3.342-.22-3.342-1.935v-.34a.441.441 0 0 0-.66-.383L6.287 13.9a.441.441 0 0 0 0 .765l4.096 2.35a.44.44 0 0 0 .661-.382v-.685c0-.333.36-.542.649-.376l1.041.597a.44.44 0 0 1 .222.383v.29c0 1.715-1.854 2.789-3.342 1.935L5.157 16.22c-1.495-.857-1.495-3.013 0-3.87l4.457-2.558c1.488-.854 3.342.22 3.342 1.935v.34c0 .34.366.551.66.383l4.097-2.35a.441.441 0 0 0 0-.765l-4.096-2.351a.441.441 0 0 0-.661.382v.685c0 .333-.36.541-.649.375l-1.041-.597a.44.44 0 0 1-.222-.383v-.29c0-1.285 1.043-2.21 2.192-2.233z"/></svg> </template>
CSS
.icon-afterpay {
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%22M12%200C5.373%200%200%205.373%200%2012c0%206.628%205.373%2012%2012%2012c6.628%200%2012-5.372%2012-12c0-6.627-5.372-12-12-12m1.236%204.924a2.2%202.2%200%200%201%201.15.299l4.457%202.557c1.495.857%201.495%203.013%200%203.87l-4.457%202.558c-1.488.854-3.342-.22-3.342-1.935v-.34a.441.441%200%200%200-.66-.383L6.287%2013.9a.441.441%200%200%200%200%20.765l4.096%202.35a.44.44%200%200%200%20.661-.382v-.685c0-.333.36-.542.649-.376l1.041.597a.44.44%200%200%201%20.222.383v.29c0%201.715-1.854%202.789-3.342%201.935L5.157%2016.22c-1.495-.857-1.495-3.013%200-3.87l4.457-2.558c1.488-.854%203.342.22%203.342%201.935v.34c0%20.34.366.551.66.383l4.097-2.35a.441.441%200%200%200%200-.765l-4.096-2.351a.441.441%200%200%200-.661.382v.685c0%20.333-.36.541-.649.375l-1.041-.597a.44.44%200%200%201-.222-.383v-.29c0-1.285%201.043-2.21%202.192-2.233z%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%22M12%200C5.373%200%200%205.373%200%2012c0%206.628%205.373%2012%2012%2012c6.628%200%2012-5.372%2012-12c0-6.627-5.372-12-12-12m1.236%204.924a2.2%202.2%200%200%201%201.15.299l4.457%202.557c1.495.857%201.495%203.013%200%203.87l-4.457%202.558c-1.488.854-3.342-.22-3.342-1.935v-.34a.441.441%200%200%200-.66-.383L6.287%2013.9a.441.441%200%200%200%200%20.765l4.096%202.35a.44.44%200%200%200%20.661-.382v-.685c0-.333.36-.542.649-.376l1.041.597a.44.44%200%200%201%20.222.383v.29c0%201.715-1.854%202.789-3.342%201.935L5.157%2016.22c-1.495-.857-1.495-3.013%200-3.87l4.457-2.558c1.488-.854%203.342.22%203.342%201.935v.34c0%20.34.366.551.66.383l4.097-2.35a.441.441%200%200%200%200-.765l-4.096-2.351a.441.441%200%200%200-.661.382v.685c0%20.333-.36.541-.649.375l-1.041-.597a.44.44%200%200%201-.222-.383v-.29c0-1.285%201.043-2.21%202.192-2.233z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/afterpay.svg?color=%231a73e8&size=48
