ripple logo
ripple from CoreUI Brands by creativeLabs Łukasz Holeczek · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- ripple
- Set
- CoreUI Brands
- Style
- Brand
- Viewbox
- 32×32
- License
- CC0 1.0
The same logo in other sets
Use the ripple logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.401 19.531c-1.131-.645-2.407-.837-3.672-.885c-1.052-.031-2.631-.724-2.631-2.645c0-1.432 1.156-2.588 2.647-2.645c1.265-.048 2.541-.24 3.671-.891a6.683 6.683 0 0 0 2.448-9.125A6.707 6.707 0 0 0 20.708.903a6.65 6.65 0 0 0-3.339 5.787c0 1.296.464 2.484 1.052 3.599c.496.927.735 2.661-.948 3.635c-1.265.724-2.843.272-3.624-.989c-.661-1.068-1.459-2.063-2.589-2.708c-3.197-1.849-7.291-.751-9.124 2.437a6.684 6.684 0 0 0 2.452 9.125a6.7 6.7 0 0 0 6.677 0c1.125-.647 1.923-1.641 2.584-2.708c.541-.871 1.911-1.985 3.624-.991c1.267.719 1.657 2.319.948 3.641c-.583 1.093-1.052 2.297-1.052 3.593c0 3.688 2.991 6.672 6.677 6.677a6.68 6.68 0 0 0 6.677-6.677a6.65 6.65 0 0 0-3.323-5.792z"/></svg>
React
import type { SVGProps } from "react";
export function CibRipple(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.401 19.531c-1.131-.645-2.407-.837-3.672-.885c-1.052-.031-2.631-.724-2.631-2.645c0-1.432 1.156-2.588 2.647-2.645c1.265-.048 2.541-.24 3.671-.891a6.683 6.683 0 0 0 2.448-9.125A6.707 6.707 0 0 0 20.708.903a6.65 6.65 0 0 0-3.339 5.787c0 1.296.464 2.484 1.052 3.599c.496.927.735 2.661-.948 3.635c-1.265.724-2.843.272-3.624-.989c-.661-1.068-1.459-2.063-2.589-2.708c-3.197-1.849-7.291-.751-9.124 2.437a6.684 6.684 0 0 0 2.452 9.125a6.7 6.7 0 0 0 6.677 0c1.125-.647 1.923-1.641 2.584-2.708c.541-.871 1.911-1.985 3.624-.991c1.267.719 1.657 2.319.948 3.641c-.583 1.093-1.052 2.297-1.052 3.593c0 3.688 2.991 6.672 6.677 6.677a6.68 6.68 0 0 0 6.677-6.677a6.65 6.65 0 0 0-3.323-5.792z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.401 19.531c-1.131-.645-2.407-.837-3.672-.885c-1.052-.031-2.631-.724-2.631-2.645c0-1.432 1.156-2.588 2.647-2.645c1.265-.048 2.541-.24 3.671-.891a6.683 6.683 0 0 0 2.448-9.125A6.707 6.707 0 0 0 20.708.903a6.65 6.65 0 0 0-3.339 5.787c0 1.296.464 2.484 1.052 3.599c.496.927.735 2.661-.948 3.635c-1.265.724-2.843.272-3.624-.989c-.661-1.068-1.459-2.063-2.589-2.708c-3.197-1.849-7.291-.751-9.124 2.437a6.684 6.684 0 0 0 2.452 9.125a6.7 6.7 0 0 0 6.677 0c1.125-.647 1.923-1.641 2.584-2.708c.541-.871 1.911-1.985 3.624-.991c1.267.719 1.657 2.319.948 3.641c-.583 1.093-1.052 2.297-1.052 3.593c0 3.688 2.991 6.672 6.677 6.677a6.68 6.68 0 0 0 6.677-6.677a6.65 6.65 0 0 0-3.323-5.792z"/></svg> </template>
CSS
.icon-ripple {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.401%2019.531c-1.131-.645-2.407-.837-3.672-.885c-1.052-.031-2.631-.724-2.631-2.645c0-1.432%201.156-2.588%202.647-2.645c1.265-.048%202.541-.24%203.671-.891a6.683%206.683%200%200%200%202.448-9.125A6.707%206.707%200%200%200%2020.708.903a6.65%206.65%200%200%200-3.339%205.787c0%201.296.464%202.484%201.052%203.599c.496.927.735%202.661-.948%203.635c-1.265.724-2.843.272-3.624-.989c-.661-1.068-1.459-2.063-2.589-2.708c-3.197-1.849-7.291-.751-9.124%202.437a6.684%206.684%200%200%200%202.452%209.125a6.7%206.7%200%200%200%206.677%200c1.125-.647%201.923-1.641%202.584-2.708c.541-.871%201.911-1.985%203.624-.991c1.267.719%201.657%202.319.948%203.641c-.583%201.093-1.052%202.297-1.052%203.593c0%203.688%202.991%206.672%206.677%206.677a6.68%206.68%200%200%200%206.677-6.677a6.65%206.65%200%200%200-3.323-5.792z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.401%2019.531c-1.131-.645-2.407-.837-3.672-.885c-1.052-.031-2.631-.724-2.631-2.645c0-1.432%201.156-2.588%202.647-2.645c1.265-.048%202.541-.24%203.671-.891a6.683%206.683%200%200%200%202.448-9.125A6.707%206.707%200%200%200%2020.708.903a6.65%206.65%200%200%200-3.339%205.787c0%201.296.464%202.484%201.052%203.599c.496.927.735%202.661-.948%203.635c-1.265.724-2.843.272-3.624-.989c-.661-1.068-1.459-2.063-2.589-2.708c-3.197-1.849-7.291-.751-9.124%202.437a6.684%206.684%200%200%200%202.452%209.125a6.7%206.7%200%200%200%206.677%200c1.125-.647%201.923-1.641%202.584-2.708c.541-.871%201.911-1.985%203.624-.991c1.267.719%201.657%202.319.948%203.641c-.583%201.093-1.052%202.297-1.052%203.593c0%203.688%202.991%206.672%206.677%206.677a6.68%206.68%200%200%200%206.677-6.677a6.65%206.65%200%200%200-3.323-5.792z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/cib/ripple.svg?color=%231a73e8&size=48
