tide high icon

tide-high-fill from Meteocons by Bas Milius · Fill · animated · MIT Free for personal and commercial use.

Name: tide-high-fill
Set: Meteocons
Style: Fill
Animation: Animated SVG (SMIL)
Viewbox: 512×512
License: MIT

1 other variant in Meteocons

Related icons in Meteocons

Use the tide high icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGqZsaHePB" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><symbol id="SVGD8QkMbIe" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><animate attributeName="d" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 89 A 16.14 16.14 0 0 0 18 105 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -15; 0 0"/></path></symbol></defs><use width="244" height="92" href="#SVGD8QkMbIe" transform="translate(134 242)"/><path fill="none" stroke="#374151" stroke-linecap="round" stroke-linejoin="round" stroke-width="12" d="M256 218v-72l-24 27.6l24-27.6l24 27.6"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -37; 0 0"/></path></svg>

React

import type { SVGProps } from "react";

export function MeteoconsTideHighFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGqZsaHePB" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#3392d6"/><stop offset=".5" stopColor="#3392d6"/><stop offset="1" stopColor="#2477b2"/></linearGradient><symbol id="SVGD8QkMbIe" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB)" stroke="#2885c7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"><animate attributeName="d" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 89 A 16.14 16.14 0 0 0 18 105 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -15; 0 0"/></path></symbol></defs><use width="244" height="92" href="#SVGD8QkMbIe" transform="translate(134 242)"/><path fill="none" stroke="#374151" strokeLinecap="round" strokeLinejoin="round" strokeWidth="12" d="M256 218v-72l-24 27.6l24-27.6l24 27.6"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -37; 0 0"/></path></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><linearGradient id="SVGqZsaHePB" x1="79.5" x2="165.8" y1="-22.3" y2="127.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3392d6"/><stop offset=".5" stop-color="#3392d6"/><stop offset="1" stop-color="#2477b2"/></linearGradient><symbol id="SVGD8QkMbIe" viewBox="0 0 244 92"><path fill="url(#SVGqZsaHePB)" stroke="#2885c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><animate attributeName="d" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 89 A 16.14 16.14 0 0 0 18 105 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z; M 242 24.63 h -8 c -10.92 0 -20.85 -11.66 -26 -21.39 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 157.15 13 152 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15.05 21.39 -26 21.39 S 101.15 13 96 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 S 45.15 13 40 3.24 a 2.28 2.28 0 0 0 -4.06 0 c -5.12 9.73 -15 21.39 -26 21.39 H 2 V 74 A 16.14 16.14 0 0 0 18 90 H 226 a 16.14 16.14 0 0 0 16 -16.3 Z"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -15; 0 0"/></path></symbol></defs><use width="244" height="92" href="#SVGD8QkMbIe" transform="translate(134 242)"/><path fill="none" stroke="#374151" stroke-linecap="round" stroke-linejoin="round" stroke-width="12" d="M256 218v-72l-24 27.6l24-27.6l24 27.6"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="3s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="translate" values="0 0; 0 -37; 0 0"/></path></svg>
</template>

CSS

.icon-tide-high-fill {
  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%20512%20512%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGqZsaHePB%22%20x1%3D%2279.5%22%20x2%3D%22165.8%22%20y1%3D%22-22.3%22%20y2%3D%22127.2%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232477b2%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVGD8QkMbIe%22%20viewBox%3D%220%200%20244%2092%22%3E%3Cpath%20fill%3D%22url(%23SVGqZsaHePB)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22244%22%20height%3D%2292%22%20href%3D%22%23SVGD8QkMbIe%22%20transform%3D%22translate(134%20242)%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23374151%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2212%22%20d%3D%22M256%20218v-72l-24%2027.6l24-27.6l24%2027.6%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%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%20512%20512%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGqZsaHePB%22%20x1%3D%2279.5%22%20x2%3D%22165.8%22%20y1%3D%22-22.3%22%20y2%3D%22127.2%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%233392d6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232477b2%22%2F%3E%3C%2FlinearGradient%3E%3Csymbol%20id%3D%22SVGD8QkMbIe%22%20viewBox%3D%220%200%20244%2092%22%3E%3Cpath%20fill%3D%22url(%23SVGqZsaHePB)%22%20stroke%3D%22%232885c7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22244%22%20height%3D%2292%22%20href%3D%22%23SVGD8QkMbIe%22%20transform%3D%22translate(134%20242)%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23374151%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2212%22%20d%3D%22M256%20218v-72l-24%2027.6l24-27.6l24%2027.6%22%20transform%3D%22translate(0%200)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

This icon is animated. Browsers do not run SVG animation inside a CSS mask, so the rule above uses a still of the drawn icon. Inline the SVG (or use the React/Vue/Svelte snippet) to keep the animation.

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/meteocons/tide-high-fill.svg?color=%231a73e8&size=48