file type storyboard logo

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

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

Related icons in VSCode Icons

Use the file type storyboard logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ffcf31" d="M16.271 9.616a5.137 5.137 0 1 0 5.137 5.137a5.137 5.137 0 0 0-5.137-5.137m0 7.379a2.231 2.231 0 1 1 2.229-2.231A2.23 2.23 0 0 1 16.271 17Z"/><path fill="#e9ad0f" d="M16.271 20.176a5.423 5.423 0 1 1 5.423-5.423a5.43 5.43 0 0 1-5.423 5.423m0-10.275a4.852 4.852 0 1 0 4.852 4.852A4.86 4.86 0 0 0 16.271 9.9Zm0 7.379a2.517 2.517 0 1 1 2.517-2.517a2.52 2.52 0 0 1-2.517 2.518Zm0-4.463a1.946 1.946 0 1 0 1.946 1.946a1.95 1.95 0 0 0-1.946-1.945Z"/><path fill="#e9ad0f" d="M16.582 9.616h-.623v-.361A4.364 4.364 0 0 0 11.6 4.9H2v-.626h9.6a4.987 4.987 0 0 1 4.982 4.982Zm4.359 15.361a4.98 4.98 0 0 1-4.982-4.982V19.9h.623v.094a4.36 4.36 0 0 0 4.359 4.359h8.617v.623z"/><path fill="#e9ad0f" d="m26.926 27.726l-.441-.44l2.634-2.634l-2.621-2.621l.441-.44L30 24.652z"/></svg>

React

import type { SVGProps } from "react";

export function VscodeIconsFileTypeStoryboard(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ffcf31" d="M16.271 9.616a5.137 5.137 0 1 0 5.137 5.137a5.137 5.137 0 0 0-5.137-5.137m0 7.379a2.231 2.231 0 1 1 2.229-2.231A2.23 2.23 0 0 1 16.271 17Z"/><path fill="#e9ad0f" d="M16.271 20.176a5.423 5.423 0 1 1 5.423-5.423a5.43 5.43 0 0 1-5.423 5.423m0-10.275a4.852 4.852 0 1 0 4.852 4.852A4.86 4.86 0 0 0 16.271 9.9Zm0 7.379a2.517 2.517 0 1 1 2.517-2.517a2.52 2.52 0 0 1-2.517 2.518Zm0-4.463a1.946 1.946 0 1 0 1.946 1.946a1.95 1.95 0 0 0-1.946-1.945Z"/><path fill="#e9ad0f" d="M16.582 9.616h-.623v-.361A4.364 4.364 0 0 0 11.6 4.9H2v-.626h9.6a4.987 4.987 0 0 1 4.982 4.982Zm4.359 15.361a4.98 4.98 0 0 1-4.982-4.982V19.9h.623v.094a4.36 4.36 0 0 0 4.359 4.359h8.617v.623z"/><path fill="#e9ad0f" d="m26.926 27.726l-.441-.44l2.634-2.634l-2.621-2.621l.441-.44L30 24.652z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ffcf31" d="M16.271 9.616a5.137 5.137 0 1 0 5.137 5.137a5.137 5.137 0 0 0-5.137-5.137m0 7.379a2.231 2.231 0 1 1 2.229-2.231A2.23 2.23 0 0 1 16.271 17Z"/><path fill="#e9ad0f" d="M16.271 20.176a5.423 5.423 0 1 1 5.423-5.423a5.43 5.43 0 0 1-5.423 5.423m0-10.275a4.852 4.852 0 1 0 4.852 4.852A4.86 4.86 0 0 0 16.271 9.9Zm0 7.379a2.517 2.517 0 1 1 2.517-2.517a2.52 2.52 0 0 1-2.517 2.518Zm0-4.463a1.946 1.946 0 1 0 1.946 1.946a1.95 1.95 0 0 0-1.946-1.945Z"/><path fill="#e9ad0f" d="M16.582 9.616h-.623v-.361A4.364 4.364 0 0 0 11.6 4.9H2v-.626h9.6a4.987 4.987 0 0 1 4.982 4.982Zm4.359 15.361a4.98 4.98 0 0 1-4.982-4.982V19.9h.623v.094a4.36 4.36 0 0 0 4.359 4.359h8.617v.623z"/><path fill="#e9ad0f" d="m26.926 27.726l-.441-.44l2.634-2.634l-2.621-2.621l.441-.44L30 24.652z"/></svg>
</template>

CSS

.icon-file-type-storyboard {
  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%22%23ffcf31%22%20d%3D%22M16.271%209.616a5.137%205.137%200%201%200%205.137%205.137a5.137%205.137%200%200%200-5.137-5.137m0%207.379a2.231%202.231%200%201%201%202.229-2.231A2.23%202.23%200%200%201%2016.271%2017Z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22M16.271%2020.176a5.423%205.423%200%201%201%205.423-5.423a5.43%205.43%200%200%201-5.423%205.423m0-10.275a4.852%204.852%200%201%200%204.852%204.852A4.86%204.86%200%200%200%2016.271%209.9Zm0%207.379a2.517%202.517%200%201%201%202.517-2.517a2.52%202.52%200%200%201-2.517%202.518Zm0-4.463a1.946%201.946%200%201%200%201.946%201.946a1.95%201.95%200%200%200-1.946-1.945Z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22M16.582%209.616h-.623v-.361A4.364%204.364%200%200%200%2011.6%204.9H2v-.626h9.6a4.987%204.987%200%200%201%204.982%204.982Zm4.359%2015.361a4.98%204.98%200%200%201-4.982-4.982V19.9h.623v.094a4.36%204.36%200%200%200%204.359%204.359h8.617v.623z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22m26.926%2027.726l-.441-.44l2.634-2.634l-2.621-2.621l.441-.44L30%2024.652z%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%22%23ffcf31%22%20d%3D%22M16.271%209.616a5.137%205.137%200%201%200%205.137%205.137a5.137%205.137%200%200%200-5.137-5.137m0%207.379a2.231%202.231%200%201%201%202.229-2.231A2.23%202.23%200%200%201%2016.271%2017Z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22M16.271%2020.176a5.423%205.423%200%201%201%205.423-5.423a5.43%205.43%200%200%201-5.423%205.423m0-10.275a4.852%204.852%200%201%200%204.852%204.852A4.86%204.86%200%200%200%2016.271%209.9Zm0%207.379a2.517%202.517%200%201%201%202.517-2.517a2.52%202.52%200%200%201-2.517%202.518Zm0-4.463a1.946%201.946%200%201%200%201.946%201.946a1.95%201.95%200%200%200-1.946-1.945Z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22M16.582%209.616h-.623v-.361A4.364%204.364%200%200%200%2011.6%204.9H2v-.626h9.6a4.987%204.987%200%200%201%204.982%204.982Zm4.359%2015.361a4.98%204.98%200%200%201-4.982-4.982V19.9h.623v.094a4.36%204.36%200%200%200%204.359%204.359h8.617v.623z%22%2F%3E%3Cpath%20fill%3D%22%23e9ad0f%22%20d%3D%22m26.926%2027.726l-.441-.44l2.634-2.634l-2.621-2.621l.441-.44L30%2024.652z%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-storyboard.svg?color=%231a73e8&size=48