transition fade icon

transition-fade from Material Symbols by Google · Regular · Images · Apache-2.0 Free for personal and commercial use.

Name: transition-fade
Set: Material Symbols
Style: Regular
Category: Images
Viewbox: 24×24
License: Apache 2.0
Aliases: transition-fade-outline

2 other variants in Material Symbols

transition-fade-rounded transition-fade-sharp

The same icon in other sets

More images icons from Material Symbols

10mp 11mp 12mp 13mp 14mp 15mp 16mp 17mp 18mp 19mp 20mp 21mp 22mp 23mp 24fps-select 24mp 2mp 30fps-select 3mp 4mp 50mp 5mp 60fps-select 6mp

Use the transition fade icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h5v18zm6.288-.288Q11 20.426 11 20t.288-.712T12 19t.713.288T13 20t-.288.713T12 21t-.712-.288m0-4Q11 16.426 11 16t.288-.712T12 15t.713.288T13 16t-.288.713T12 17t-.712-.288m0-4Q11 12.425 11 12t.288-.712T12 11t.713.288T13 12t-.288.713T12 13t-.712-.288m0-4Q11 8.426 11 8t.288-.712T12 7t.713.288T13 8t-.288.713T12 9t-.712-.288m0-4Q11 4.426 11 4t.288-.712T12 3t.713.288T13 4t-.288.713T12 5t-.712-.288m2 14Q13 18.426 13 18t.288-.712T14 17t.713.288T15 18t-.288.713T14 19t-.712-.288m0-4Q13 14.425 13 14t.288-.712T14 13t.713.288T15 14t-.288.713T14 15t-.712-.288m0-4Q13 10.426 13 10t.288-.712T14 9t.713.288T15 10t-.288.713T14 11t-.712-.288m0-4Q13 6.426 13 6t.288-.712T14 5t.713.288T15 6t-.288.713T14 7t-.712-.288m2 14Q15 20.426 15 20t.288-.712T16 19t.713.288T17 20t-.288.713T16 21t-.712-.288m0-4Q15 16.426 15 16t.288-.712T16 15t.713.288T17 16t-.288.713T16 17t-.712-.288m0-4Q15 12.425 15 12t.288-.712T16 11t.713.288T17 12t-.288.713T16 13t-.712-.288m0-4Q15 8.426 15 8t.288-.712T16 7t.713.288T17 8t-.288.713T16 9t-.712-.288m0-4Q15 4.426 15 4t.288-.712T16 3t.713.288T17 4t-.288.713T16 5t-.712-.288M18 19q-.425 0-.712-.288T17 18t.288-.712T18 17t.713.288T19 18t-.288.713T18 19m0-4q-.425 0-.712-.288T17 14t.288-.712T18 13t.713.288T19 14t-.288.713T18 15m0-4q-.425 0-.712-.288T17 10t.288-.712T18 9t.713.288T19 10t-.288.713T18 11m-.712-4.288Q17 6.426 17 6t.288-.712T18 5t.713.288T19 6t-.288.713T18 7t-.712-.288m2 14Q19 20.426 19 20t.288-.712T20 19t.713.288T21 20t-.288.713T20 21t-.712-.288m0-4Q19 16.426 19 16t.288-.712T20 15t.713.288T21 16t-.288.713T20 17t-.712-.288m0-4Q19 12.425 19 12t.288-.712T20 11t.713.288T21 12t-.288.713T20 13t-.712-.288m0-4Q19 8.426 19 8t.288-.712T20 7t.713.288T21 8t-.288.713T20 9t-.712-.288m0-4Q19 4.426 19 4t.288-.712T20 3t.713.288T21 4t-.288.713T20 5t-.712-.288"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsTransitionFade(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="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h5v18zm6.288-.288Q11 20.426 11 20t.288-.712T12 19t.713.288T13 20t-.288.713T12 21t-.712-.288m0-4Q11 16.426 11 16t.288-.712T12 15t.713.288T13 16t-.288.713T12 17t-.712-.288m0-4Q11 12.425 11 12t.288-.712T12 11t.713.288T13 12t-.288.713T12 13t-.712-.288m0-4Q11 8.426 11 8t.288-.712T12 7t.713.288T13 8t-.288.713T12 9t-.712-.288m0-4Q11 4.426 11 4t.288-.712T12 3t.713.288T13 4t-.288.713T12 5t-.712-.288m2 14Q13 18.426 13 18t.288-.712T14 17t.713.288T15 18t-.288.713T14 19t-.712-.288m0-4Q13 14.425 13 14t.288-.712T14 13t.713.288T15 14t-.288.713T14 15t-.712-.288m0-4Q13 10.426 13 10t.288-.712T14 9t.713.288T15 10t-.288.713T14 11t-.712-.288m0-4Q13 6.426 13 6t.288-.712T14 5t.713.288T15 6t-.288.713T14 7t-.712-.288m2 14Q15 20.426 15 20t.288-.712T16 19t.713.288T17 20t-.288.713T16 21t-.712-.288m0-4Q15 16.426 15 16t.288-.712T16 15t.713.288T17 16t-.288.713T16 17t-.712-.288m0-4Q15 12.425 15 12t.288-.712T16 11t.713.288T17 12t-.288.713T16 13t-.712-.288m0-4Q15 8.426 15 8t.288-.712T16 7t.713.288T17 8t-.288.713T16 9t-.712-.288m0-4Q15 4.426 15 4t.288-.712T16 3t.713.288T17 4t-.288.713T16 5t-.712-.288M18 19q-.425 0-.712-.288T17 18t.288-.712T18 17t.713.288T19 18t-.288.713T18 19m0-4q-.425 0-.712-.288T17 14t.288-.712T18 13t.713.288T19 14t-.288.713T18 15m0-4q-.425 0-.712-.288T17 10t.288-.712T18 9t.713.288T19 10t-.288.713T18 11m-.712-4.288Q17 6.426 17 6t.288-.712T18 5t.713.288T19 6t-.288.713T18 7t-.712-.288m2 14Q19 20.426 19 20t.288-.712T20 19t.713.288T21 20t-.288.713T20 21t-.712-.288m0-4Q19 16.426 19 16t.288-.712T20 15t.713.288T21 16t-.288.713T20 17t-.712-.288m0-4Q19 12.425 19 12t.288-.712T20 11t.713.288T21 12t-.288.713T20 13t-.712-.288m0-4Q19 8.426 19 8t.288-.712T20 7t.713.288T21 8t-.288.713T20 9t-.712-.288m0-4Q19 4.426 19 4t.288-.712T20 3t.713.288T21 4t-.288.713T20 5t-.712-.288"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h5v18zm6.288-.288Q11 20.426 11 20t.288-.712T12 19t.713.288T13 20t-.288.713T12 21t-.712-.288m0-4Q11 16.426 11 16t.288-.712T12 15t.713.288T13 16t-.288.713T12 17t-.712-.288m0-4Q11 12.425 11 12t.288-.712T12 11t.713.288T13 12t-.288.713T12 13t-.712-.288m0-4Q11 8.426 11 8t.288-.712T12 7t.713.288T13 8t-.288.713T12 9t-.712-.288m0-4Q11 4.426 11 4t.288-.712T12 3t.713.288T13 4t-.288.713T12 5t-.712-.288m2 14Q13 18.426 13 18t.288-.712T14 17t.713.288T15 18t-.288.713T14 19t-.712-.288m0-4Q13 14.425 13 14t.288-.712T14 13t.713.288T15 14t-.288.713T14 15t-.712-.288m0-4Q13 10.426 13 10t.288-.712T14 9t.713.288T15 10t-.288.713T14 11t-.712-.288m0-4Q13 6.426 13 6t.288-.712T14 5t.713.288T15 6t-.288.713T14 7t-.712-.288m2 14Q15 20.426 15 20t.288-.712T16 19t.713.288T17 20t-.288.713T16 21t-.712-.288m0-4Q15 16.426 15 16t.288-.712T16 15t.713.288T17 16t-.288.713T16 17t-.712-.288m0-4Q15 12.425 15 12t.288-.712T16 11t.713.288T17 12t-.288.713T16 13t-.712-.288m0-4Q15 8.426 15 8t.288-.712T16 7t.713.288T17 8t-.288.713T16 9t-.712-.288m0-4Q15 4.426 15 4t.288-.712T16 3t.713.288T17 4t-.288.713T16 5t-.712-.288M18 19q-.425 0-.712-.288T17 18t.288-.712T18 17t.713.288T19 18t-.288.713T18 19m0-4q-.425 0-.712-.288T17 14t.288-.712T18 13t.713.288T19 14t-.288.713T18 15m0-4q-.425 0-.712-.288T17 10t.288-.712T18 9t.713.288T19 10t-.288.713T18 11m-.712-4.288Q17 6.426 17 6t.288-.712T18 5t.713.288T19 6t-.288.713T18 7t-.712-.288m2 14Q19 20.426 19 20t.288-.712T20 19t.713.288T21 20t-.288.713T20 21t-.712-.288m0-4Q19 16.426 19 16t.288-.712T20 15t.713.288T21 16t-.288.713T20 17t-.712-.288m0-4Q19 12.425 19 12t.288-.712T20 11t.713.288T21 12t-.288.713T20 13t-.712-.288m0-4Q19 8.426 19 8t.288-.712T20 7t.713.288T21 8t-.288.713T20 9t-.712-.288m0-4Q19 4.426 19 4t.288-.712T20 3t.713.288T21 4t-.288.713T20 5t-.712-.288"/></svg>
</template>

CSS

.icon-transition-fade {
  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%22M5%2021q-.825%200-1.412-.587T3%2019V5q0-.825.588-1.412T5%203h5v18zm6.288-.288Q11%2020.426%2011%2020t.288-.712T12%2019t.713.288T13%2020t-.288.713T12%2021t-.712-.288m0-4Q11%2016.426%2011%2016t.288-.712T12%2015t.713.288T13%2016t-.288.713T12%2017t-.712-.288m0-4Q11%2012.425%2011%2012t.288-.712T12%2011t.713.288T13%2012t-.288.713T12%2013t-.712-.288m0-4Q11%208.426%2011%208t.288-.712T12%207t.713.288T13%208t-.288.713T12%209t-.712-.288m0-4Q11%204.426%2011%204t.288-.712T12%203t.713.288T13%204t-.288.713T12%205t-.712-.288m2%2014Q13%2018.426%2013%2018t.288-.712T14%2017t.713.288T15%2018t-.288.713T14%2019t-.712-.288m0-4Q13%2014.425%2013%2014t.288-.712T14%2013t.713.288T15%2014t-.288.713T14%2015t-.712-.288m0-4Q13%2010.426%2013%2010t.288-.712T14%209t.713.288T15%2010t-.288.713T14%2011t-.712-.288m0-4Q13%206.426%2013%206t.288-.712T14%205t.713.288T15%206t-.288.713T14%207t-.712-.288m2%2014Q15%2020.426%2015%2020t.288-.712T16%2019t.713.288T17%2020t-.288.713T16%2021t-.712-.288m0-4Q15%2016.426%2015%2016t.288-.712T16%2015t.713.288T17%2016t-.288.713T16%2017t-.712-.288m0-4Q15%2012.425%2015%2012t.288-.712T16%2011t.713.288T17%2012t-.288.713T16%2013t-.712-.288m0-4Q15%208.426%2015%208t.288-.712T16%207t.713.288T17%208t-.288.713T16%209t-.712-.288m0-4Q15%204.426%2015%204t.288-.712T16%203t.713.288T17%204t-.288.713T16%205t-.712-.288M18%2019q-.425%200-.712-.288T17%2018t.288-.712T18%2017t.713.288T19%2018t-.288.713T18%2019m0-4q-.425%200-.712-.288T17%2014t.288-.712T18%2013t.713.288T19%2014t-.288.713T18%2015m0-4q-.425%200-.712-.288T17%2010t.288-.712T18%209t.713.288T19%2010t-.288.713T18%2011m-.712-4.288Q17%206.426%2017%206t.288-.712T18%205t.713.288T19%206t-.288.713T18%207t-.712-.288m2%2014Q19%2020.426%2019%2020t.288-.712T20%2019t.713.288T21%2020t-.288.713T20%2021t-.712-.288m0-4Q19%2016.426%2019%2016t.288-.712T20%2015t.713.288T21%2016t-.288.713T20%2017t-.712-.288m0-4Q19%2012.425%2019%2012t.288-.712T20%2011t.713.288T21%2012t-.288.713T20%2013t-.712-.288m0-4Q19%208.426%2019%208t.288-.712T20%207t.713.288T21%208t-.288.713T20%209t-.712-.288m0-4Q19%204.426%2019%204t.288-.712T20%203t.713.288T21%204t-.288.713T20%205t-.712-.288%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%22M5%2021q-.825%200-1.412-.587T3%2019V5q0-.825.588-1.412T5%203h5v18zm6.288-.288Q11%2020.426%2011%2020t.288-.712T12%2019t.713.288T13%2020t-.288.713T12%2021t-.712-.288m0-4Q11%2016.426%2011%2016t.288-.712T12%2015t.713.288T13%2016t-.288.713T12%2017t-.712-.288m0-4Q11%2012.425%2011%2012t.288-.712T12%2011t.713.288T13%2012t-.288.713T12%2013t-.712-.288m0-4Q11%208.426%2011%208t.288-.712T12%207t.713.288T13%208t-.288.713T12%209t-.712-.288m0-4Q11%204.426%2011%204t.288-.712T12%203t.713.288T13%204t-.288.713T12%205t-.712-.288m2%2014Q13%2018.426%2013%2018t.288-.712T14%2017t.713.288T15%2018t-.288.713T14%2019t-.712-.288m0-4Q13%2014.425%2013%2014t.288-.712T14%2013t.713.288T15%2014t-.288.713T14%2015t-.712-.288m0-4Q13%2010.426%2013%2010t.288-.712T14%209t.713.288T15%2010t-.288.713T14%2011t-.712-.288m0-4Q13%206.426%2013%206t.288-.712T14%205t.713.288T15%206t-.288.713T14%207t-.712-.288m2%2014Q15%2020.426%2015%2020t.288-.712T16%2019t.713.288T17%2020t-.288.713T16%2021t-.712-.288m0-4Q15%2016.426%2015%2016t.288-.712T16%2015t.713.288T17%2016t-.288.713T16%2017t-.712-.288m0-4Q15%2012.425%2015%2012t.288-.712T16%2011t.713.288T17%2012t-.288.713T16%2013t-.712-.288m0-4Q15%208.426%2015%208t.288-.712T16%207t.713.288T17%208t-.288.713T16%209t-.712-.288m0-4Q15%204.426%2015%204t.288-.712T16%203t.713.288T17%204t-.288.713T16%205t-.712-.288M18%2019q-.425%200-.712-.288T17%2018t.288-.712T18%2017t.713.288T19%2018t-.288.713T18%2019m0-4q-.425%200-.712-.288T17%2014t.288-.712T18%2013t.713.288T19%2014t-.288.713T18%2015m0-4q-.425%200-.712-.288T17%2010t.288-.712T18%209t.713.288T19%2010t-.288.713T18%2011m-.712-4.288Q17%206.426%2017%206t.288-.712T18%205t.713.288T19%206t-.288.713T18%207t-.712-.288m2%2014Q19%2020.426%2019%2020t.288-.712T20%2019t.713.288T21%2020t-.288.713T20%2021t-.712-.288m0-4Q19%2016.426%2019%2016t.288-.712T20%2015t.713.288T21%2016t-.288.713T20%2017t-.712-.288m0-4Q19%2012.425%2019%2012t.288-.712T20%2011t.713.288T21%2012t-.288.713T20%2013t-.712-.288m0-4Q19%208.426%2019%208t.288-.712T20%207t.713.288T21%208t-.288.713T20%209t-.712-.288m0-4Q19%204.426%2019%204t.288-.712T20%203t.713.288T21%204t-.288.713T20%205t-.712-.288%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/transition-fade.svg?color=%231a73e8&size=48