file type flow logo

file-type-flow from VSCode Icons by Roberto Huertas · Color · MIT Free for personal and commercial use.

Name
file-type-flow
Set
VSCode Icons
Style
Color
Viewbox
32×32
License
MIT

Related icons in VSCode Icons

Use the file type flow logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="SVGFogtQd3v" x1="-67.907" x2="-67.857" y1="-308.551" y2="-308.564" gradientTransform="matrix(87.822 0 0 -88.533 5984.532 -27290.617)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffb047"/></linearGradient><linearGradient id="SVGrE49Mbwb" x1="-67.674" x2="-67.647" y1="-310.121" y2="-310.063" gradientTransform="matrix(87.822 0 0 -88.533 5964.667 -27443)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd754"/><stop offset="1" stop-color="#ffb532"/></linearGradient><linearGradient id="SVGY4QxCdjl" x1="-67.029" x2="-67.029" y1="-310.91" y2="-310.86" gradientTransform="matrix(87.822 0 0 -88.533 5902.8 -27518.733)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd642"/><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffb532"/></linearGradient><linearGradient id="SVGLLOQadKw" x1="-66.252" x2="-66.32" y1="-310.377" y2="-310.362" gradientTransform="matrix(106.198 0 0 -88.551 7048.428 -27474.167)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffa829"/></linearGradient></defs><path fill="#ffdf51" fill-opacity=".7" d="M23.426 29.41v-7.238h-7.18z"/><path fill="#ff8900" fill-opacity=".7" d="M24.231 25.306v-7.829h-7.765z"/><path fill="url(#SVGFogtQd3v)" fill-opacity=".7" d="M19.515 22.171V30h7.766z"/><path fill="#ffdf4f" fill-opacity=".7" d="M22.608 18v-6.191h-6.142z"/><path fill="url(#SVGrE49Mbwb)" fill-opacity=".8" d="M25.524 16.525V8.7h-7.765l7.766 7.829"/><path fill="url(#SVGY4QxCdjl)" fill-opacity=".8" d="M12.288 2v7.829h7.766z"/><path fill="url(#SVGLLOQadKw)" fill-opacity=".88" d="M14.11 14.262V6.433H4.719l7.732 7.83z"/><path fill="#ffb700" fill-opacity=".7" d="M14.11 29.958v-9.471H4.719z"/><path fill="#ffb700" fill-opacity=".5" d="M14.112 22.114v-7.829H6.346z"/><path fill="#ffcd25" fill-opacity=".7" d="M16.465 11.809v7.829h7.766z"/><path fill="#ff8900" fill-opacity=".7" d="M14.092 12.691V4.862H6.326zm2.154 9.48V30h7.766z"/><path fill="#fff" d="m21.122 22.172l-2.513-2.534h-2.144l.001-7.829h4.381l-1.965-1.98h-4.79l.018 4.433V30h2.136v-7.828z"/></svg>

React

import type { SVGProps } from "react";

export function VscodeIconsFileTypeFlow(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="SVGFogtQd3v" x1="-67.907" x2="-67.857" y1="-308.551" y2="-308.564" gradientTransform="matrix(87.822 0 0 -88.533 5984.532 -27290.617)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#ffd441"/><stop offset="1" stopColor="#ffb047"/></linearGradient><linearGradient id="SVGrE49Mbwb" x1="-67.674" x2="-67.647" y1="-310.121" y2="-310.063" gradientTransform="matrix(87.822 0 0 -88.533 5964.667 -27443)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#ffd754"/><stop offset="1" stopColor="#ffb532"/></linearGradient><linearGradient id="SVGY4QxCdjl" x1="-67.029" x2="-67.029" y1="-310.91" y2="-310.86" gradientTransform="matrix(87.822 0 0 -88.533 5902.8 -27518.733)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#ffd642"/><stop offset="0" stopColor="#ffd441"/><stop offset="1" stopColor="#ffb532"/></linearGradient><linearGradient id="SVGLLOQadKw" x1="-66.252" x2="-66.32" y1="-310.377" y2="-310.362" gradientTransform="matrix(106.198 0 0 -88.551 7048.428 -27474.167)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#ffd441"/><stop offset="1" stopColor="#ffa829"/></linearGradient></defs><path fill="#ffdf51" fillOpacity=".7" d="M23.426 29.41v-7.238h-7.18z"/><path fill="#ff8900" fillOpacity=".7" d="M24.231 25.306v-7.829h-7.765z"/><path fill="url(#SVGFogtQd3v)" fillOpacity=".7" d="M19.515 22.171V30h7.766z"/><path fill="#ffdf4f" fillOpacity=".7" d="M22.608 18v-6.191h-6.142z"/><path fill="url(#SVGrE49Mbwb)" fillOpacity=".8" d="M25.524 16.525V8.7h-7.765l7.766 7.829"/><path fill="url(#SVGY4QxCdjl)" fillOpacity=".8" d="M12.288 2v7.829h7.766z"/><path fill="url(#SVGLLOQadKw)" fillOpacity=".88" d="M14.11 14.262V6.433H4.719l7.732 7.83z"/><path fill="#ffb700" fillOpacity=".7" d="M14.11 29.958v-9.471H4.719z"/><path fill="#ffb700" fillOpacity=".5" d="M14.112 22.114v-7.829H6.346z"/><path fill="#ffcd25" fillOpacity=".7" d="M16.465 11.809v7.829h7.766z"/><path fill="#ff8900" fillOpacity=".7" d="M14.092 12.691V4.862H6.326zm2.154 9.48V30h7.766z"/><path fill="#fff" d="m21.122 22.172l-2.513-2.534h-2.144l.001-7.829h4.381l-1.965-1.98h-4.79l.018 4.433V30h2.136v-7.828z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="SVGFogtQd3v" x1="-67.907" x2="-67.857" y1="-308.551" y2="-308.564" gradientTransform="matrix(87.822 0 0 -88.533 5984.532 -27290.617)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffb047"/></linearGradient><linearGradient id="SVGrE49Mbwb" x1="-67.674" x2="-67.647" y1="-310.121" y2="-310.063" gradientTransform="matrix(87.822 0 0 -88.533 5964.667 -27443)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd754"/><stop offset="1" stop-color="#ffb532"/></linearGradient><linearGradient id="SVGY4QxCdjl" x1="-67.029" x2="-67.029" y1="-310.91" y2="-310.86" gradientTransform="matrix(87.822 0 0 -88.533 5902.8 -27518.733)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd642"/><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffb532"/></linearGradient><linearGradient id="SVGLLOQadKw" x1="-66.252" x2="-66.32" y1="-310.377" y2="-310.362" gradientTransform="matrix(106.198 0 0 -88.551 7048.428 -27474.167)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd441"/><stop offset="1" stop-color="#ffa829"/></linearGradient></defs><path fill="#ffdf51" fill-opacity=".7" d="M23.426 29.41v-7.238h-7.18z"/><path fill="#ff8900" fill-opacity=".7" d="M24.231 25.306v-7.829h-7.765z"/><path fill="url(#SVGFogtQd3v)" fill-opacity=".7" d="M19.515 22.171V30h7.766z"/><path fill="#ffdf4f" fill-opacity=".7" d="M22.608 18v-6.191h-6.142z"/><path fill="url(#SVGrE49Mbwb)" fill-opacity=".8" d="M25.524 16.525V8.7h-7.765l7.766 7.829"/><path fill="url(#SVGY4QxCdjl)" fill-opacity=".8" d="M12.288 2v7.829h7.766z"/><path fill="url(#SVGLLOQadKw)" fill-opacity=".88" d="M14.11 14.262V6.433H4.719l7.732 7.83z"/><path fill="#ffb700" fill-opacity=".7" d="M14.11 29.958v-9.471H4.719z"/><path fill="#ffb700" fill-opacity=".5" d="M14.112 22.114v-7.829H6.346z"/><path fill="#ffcd25" fill-opacity=".7" d="M16.465 11.809v7.829h7.766z"/><path fill="#ff8900" fill-opacity=".7" d="M14.092 12.691V4.862H6.326zm2.154 9.48V30h7.766z"/><path fill="#fff" d="m21.122 22.172l-2.513-2.534h-2.144l.001-7.829h4.381l-1.965-1.98h-4.79l.018 4.433V30h2.136v-7.828z"/></svg>
</template>

CSS

.icon-file-type-flow {
  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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGFogtQd3v%22%20x1%3D%22-67.907%22%20x2%3D%22-67.857%22%20y1%3D%22-308.551%22%20y2%3D%22-308.564%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205984.532%20-27290.617)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb047%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrE49Mbwb%22%20x1%3D%22-67.674%22%20x2%3D%22-67.647%22%20y1%3D%22-310.121%22%20y2%3D%22-310.063%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205964.667%20-27443)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd754%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb532%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGY4QxCdjl%22%20x1%3D%22-67.029%22%20x2%3D%22-67.029%22%20y1%3D%22-310.91%22%20y2%3D%22-310.86%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205902.8%20-27518.733)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd642%22%2F%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb532%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGLLOQadKw%22%20x1%3D%22-66.252%22%20x2%3D%22-66.32%22%20y1%3D%22-310.377%22%20y2%3D%22-310.362%22%20gradientTransform%3D%22matrix(106.198%200%200%20-88.551%207048.428%20-27474.167)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffa829%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23ffdf51%22%20fill-opacity%3D%22.7%22%20d%3D%22M23.426%2029.41v-7.238h-7.18z%22%2F%3E%3Cpath%20fill%3D%22%23ff8900%22%20fill-opacity%3D%22.7%22%20d%3D%22M24.231%2025.306v-7.829h-7.765z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFogtQd3v)%22%20fill-opacity%3D%22.7%22%20d%3D%22M19.515%2022.171V30h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23ffdf4f%22%20fill-opacity%3D%22.7%22%20d%3D%22M22.608%2018v-6.191h-6.142z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrE49Mbwb)%22%20fill-opacity%3D%22.8%22%20d%3D%22M25.524%2016.525V8.7h-7.765l7.766%207.829%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGY4QxCdjl)%22%20fill-opacity%3D%22.8%22%20d%3D%22M12.288%202v7.829h7.766z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLLOQadKw)%22%20fill-opacity%3D%22.88%22%20d%3D%22M14.11%2014.262V6.433H4.719l7.732%207.83z%22%2F%3E%3Cpath%20fill%3D%22%23ffb700%22%20fill-opacity%3D%22.7%22%20d%3D%22M14.11%2029.958v-9.471H4.719z%22%2F%3E%3Cpath%20fill%3D%22%23ffb700%22%20fill-opacity%3D%22.5%22%20d%3D%22M14.112%2022.114v-7.829H6.346z%22%2F%3E%3Cpath%20fill%3D%22%23ffcd25%22%20fill-opacity%3D%22.7%22%20d%3D%22M16.465%2011.809v7.829h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23ff8900%22%20fill-opacity%3D%22.7%22%20d%3D%22M14.092%2012.691V4.862H6.326zm2.154%209.48V30h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m21.122%2022.172l-2.513-2.534h-2.144l.001-7.829h4.381l-1.965-1.98h-4.79l.018%204.433V30h2.136v-7.828z%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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGFogtQd3v%22%20x1%3D%22-67.907%22%20x2%3D%22-67.857%22%20y1%3D%22-308.551%22%20y2%3D%22-308.564%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205984.532%20-27290.617)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb047%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrE49Mbwb%22%20x1%3D%22-67.674%22%20x2%3D%22-67.647%22%20y1%3D%22-310.121%22%20y2%3D%22-310.063%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205964.667%20-27443)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd754%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb532%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGY4QxCdjl%22%20x1%3D%22-67.029%22%20x2%3D%22-67.029%22%20y1%3D%22-310.91%22%20y2%3D%22-310.86%22%20gradientTransform%3D%22matrix(87.822%200%200%20-88.533%205902.8%20-27518.733)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd642%22%2F%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb532%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGLLOQadKw%22%20x1%3D%22-66.252%22%20x2%3D%22-66.32%22%20y1%3D%22-310.377%22%20y2%3D%22-310.362%22%20gradientTransform%3D%22matrix(106.198%200%200%20-88.551%207048.428%20-27474.167)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd441%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffa829%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23ffdf51%22%20fill-opacity%3D%22.7%22%20d%3D%22M23.426%2029.41v-7.238h-7.18z%22%2F%3E%3Cpath%20fill%3D%22%23ff8900%22%20fill-opacity%3D%22.7%22%20d%3D%22M24.231%2025.306v-7.829h-7.765z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFogtQd3v)%22%20fill-opacity%3D%22.7%22%20d%3D%22M19.515%2022.171V30h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23ffdf4f%22%20fill-opacity%3D%22.7%22%20d%3D%22M22.608%2018v-6.191h-6.142z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrE49Mbwb)%22%20fill-opacity%3D%22.8%22%20d%3D%22M25.524%2016.525V8.7h-7.765l7.766%207.829%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGY4QxCdjl)%22%20fill-opacity%3D%22.8%22%20d%3D%22M12.288%202v7.829h7.766z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLLOQadKw)%22%20fill-opacity%3D%22.88%22%20d%3D%22M14.11%2014.262V6.433H4.719l7.732%207.83z%22%2F%3E%3Cpath%20fill%3D%22%23ffb700%22%20fill-opacity%3D%22.7%22%20d%3D%22M14.11%2029.958v-9.471H4.719z%22%2F%3E%3Cpath%20fill%3D%22%23ffb700%22%20fill-opacity%3D%22.5%22%20d%3D%22M14.112%2022.114v-7.829H6.346z%22%2F%3E%3Cpath%20fill%3D%22%23ffcd25%22%20fill-opacity%3D%22.7%22%20d%3D%22M16.465%2011.809v7.829h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23ff8900%22%20fill-opacity%3D%22.7%22%20d%3D%22M14.092%2012.691V4.862H6.326zm2.154%209.48V30h7.766z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m21.122%2022.172l-2.513-2.534h-2.144l.001-7.829h4.381l-1.965-1.98h-4.79l.018%204.433V30h2.136v-7.828z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/vscode-icons/file-type-flow.svg?color=%231a73e8&size=48