pressure low icon

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

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

1 other variant in Meteocons

Related icons in Meteocons

pressure-high pressure-high-alt pressure-low-alt

Use the pressure low icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#2a81bf" d="M293.5 298a7.7 7.7 0 0 0-5.3 2L256 330.9L223.8 300a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 253a7.7 7.7 0 0 0-5.3 2L256 285.9L223.8 255a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 208a7.7 7.7 0 0 0-5.3 2L256 240.9L223.8 210a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 163a7.7 7.7 0 0 0-5.3 2L256 195.9L223.8 165a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path></svg>

React

import type { SVGProps } from "react";

export function MeteoconsPressureLowFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#2a81bf" d="M293.5 298a7.7 7.7 0 0 0-5.3 2L256 330.9L223.8 300a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 253a7.7 7.7 0 0 0-5.3 2L256 285.9L223.8 255a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 208a7.7 7.7 0 0 0-5.3 2L256 240.9L223.8 210a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 163a7.7 7.7 0 0 0-5.3 2L256 195.9L223.8 165a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#2a81bf" d="M293.5 298a7.7 7.7 0 0 0-5.3 2L256 330.9L223.8 300a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.3s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 253a7.7 7.7 0 0 0-5.3 2L256 285.9L223.8 255a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.2s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 208a7.7 7.7 0 0 0-5.3 2L256 240.9L223.8 210a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1.1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path><path fill="#2a81bf" d="M293.5 163a7.7 7.7 0 0 0-5.3 2L256 195.9L223.8 165a7.8 7.8 0 0 0-10.6 0a6.9 6.9 0 0 0 0 10l37.5 35.8a7.8 7.8 0 0 0 10.6 0l37.5-35.7a6.9 6.9 0 0 0 0-10.1a7.7 7.7 0 0 0-5.3-2.1Z" opacity="0"><animateTransform attributeName="transform" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" type="translate" values="0 -30; 0 0; 0 30"/><animate attributeName="opacity" begin="-1s" calcMode="spline" dur="3s" keySplines=".55, 0, .1, 1; .55, 0, .1, 1" repeatCount="indefinite" values="0; 1; 0"/></path></svg>
</template>

CSS

.icon-pressure-low-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%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20298a7.7%207.7%200%200%200-5.3%202L256%20330.9L223.8%20300a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20253a7.7%207.7%200%200%200-5.3%202L256%20285.9L223.8%20255a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20208a7.7%207.7%200%200%200-5.3%202L256%20240.9L223.8%20210a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20163a7.7%207.7%200%200%200-5.3%202L256%20195.9L223.8%20165a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%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%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20298a7.7%207.7%200%200%200-5.3%202L256%20330.9L223.8%20300a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20253a7.7%207.7%200%200%200-5.3%202L256%20285.9L223.8%20255a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20208a7.7%207.7%200%200%200-5.3%202L256%20240.9L223.8%20210a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232a81bf%22%20d%3D%22M293.5%20163a7.7%207.7%200%200%200-5.3%202L256%20195.9L223.8%20165a7.8%207.8%200%200%200-10.6%200a6.9%206.9%200%200%200%200%2010l37.5%2035.8a7.8%207.8%200%200%200%2010.6%200l37.5-35.7a6.9%206.9%200%200%200%200-10.1a7.7%207.7%200%200%200-5.3-2.1Z%22%20opacity%3D%221%22%20transform%3D%22translate(0%2030)%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/pressure-low-fill.svg?color=%231a73e8&size=48