storybook logo

storybook from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.

Name: storybook
Set: Material Icon Theme
Style: Color
Viewbox: 32×32
License: MIT

The same logo in other sets

storybookCatppuccin Icons storybookCoreUI Brands storybookDevicon storybookFont Awesome Brands storybookSVG Logos storybookSimple Icons

Use the storybook logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ff4081" d="m24.95 28.948l-18-.9a1 1 0 0 1-.95-1V6.906a1 1 0 0 1 .9-.995l18-1.905A1 1 0 0 1 26 5v22.949a1 1 0 0 1-1.05.998Z"/><path fill="#fafafa" d="m20 8.52l.19-4.242l3.649-.275l.16 4.37a.28.28 0 0 1-.276.283a.3.3 0 0 1-.188-.063L22.123 7.52l-1.668 1.23a.29.29 0 0 1-.398-.055A.27.27 0 0 1 20 8.52m-2.128 6.647c0 .487 3.448.25 3.912-.094c0-3.324-1.87-5.073-5.298-5.073c-3.421 0-5.345 1.774-5.345 4.436c0 4.642 6.561 4.735 6.561 7.266a1.022 1.022 0 0 1-1.164 1.13c-1.047 0-1.459-.512-1.413-2.242c0-.375-3.984-.494-4.101 0c-.308 4.198 2.426 5.41 5.56 5.41C19.619 26 22 24.45 22 21.658c0-4.973-6.653-4.842-6.653-7.31a1.08 1.08 0 0 1 1.243-1.13c.478 0 1.354.08 1.282 1.949"/></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeStorybook(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ff4081" d="m24.95 28.948l-18-.9a1 1 0 0 1-.95-1V6.906a1 1 0 0 1 .9-.995l18-1.905A1 1 0 0 1 26 5v22.949a1 1 0 0 1-1.05.998Z"/><path fill="#fafafa" d="m20 8.52l.19-4.242l3.649-.275l.16 4.37a.28.28 0 0 1-.276.283a.3.3 0 0 1-.188-.063L22.123 7.52l-1.668 1.23a.29.29 0 0 1-.398-.055A.27.27 0 0 1 20 8.52m-2.128 6.647c0 .487 3.448.25 3.912-.094c0-3.324-1.87-5.073-5.298-5.073c-3.421 0-5.345 1.774-5.345 4.436c0 4.642 6.561 4.735 6.561 7.266a1.022 1.022 0 0 1-1.164 1.13c-1.047 0-1.459-.512-1.413-2.242c0-.375-3.984-.494-4.101 0c-.308 4.198 2.426 5.41 5.56 5.41C19.619 26 22 24.45 22 21.658c0-4.973-6.653-4.842-6.653-7.31a1.08 1.08 0 0 1 1.243-1.13c.478 0 1.354.08 1.282 1.949"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#ff4081" d="m24.95 28.948l-18-.9a1 1 0 0 1-.95-1V6.906a1 1 0 0 1 .9-.995l18-1.905A1 1 0 0 1 26 5v22.949a1 1 0 0 1-1.05.998Z"/><path fill="#fafafa" d="m20 8.52l.19-4.242l3.649-.275l.16 4.37a.28.28 0 0 1-.276.283a.3.3 0 0 1-.188-.063L22.123 7.52l-1.668 1.23a.29.29 0 0 1-.398-.055A.27.27 0 0 1 20 8.52m-2.128 6.647c0 .487 3.448.25 3.912-.094c0-3.324-1.87-5.073-5.298-5.073c-3.421 0-5.345 1.774-5.345 4.436c0 4.642 6.561 4.735 6.561 7.266a1.022 1.022 0 0 1-1.164 1.13c-1.047 0-1.459-.512-1.413-2.242c0-.375-3.984-.494-4.101 0c-.308 4.198 2.426 5.41 5.56 5.41C19.619 26 22 24.45 22 21.658c0-4.973-6.653-4.842-6.653-7.31a1.08 1.08 0 0 1 1.243-1.13c.478 0 1.354.08 1.282 1.949"/></svg>
</template>

CSS

.icon-storybook {
  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%23ff4081%22%20d%3D%22m24.95%2028.948l-18-.9a1%201%200%200%201-.95-1V6.906a1%201%200%200%201%20.9-.995l18-1.905A1%201%200%200%201%2026%205v22.949a1%201%200%200%201-1.05.998Z%22%2F%3E%3Cpath%20fill%3D%22%23fafafa%22%20d%3D%22m20%208.52l.19-4.242l3.649-.275l.16%204.37a.28.28%200%200%201-.276.283a.3.3%200%200%201-.188-.063L22.123%207.52l-1.668%201.23a.29.29%200%200%201-.398-.055A.27.27%200%200%201%2020%208.52m-2.128%206.647c0%20.487%203.448.25%203.912-.094c0-3.324-1.87-5.073-5.298-5.073c-3.421%200-5.345%201.774-5.345%204.436c0%204.642%206.561%204.735%206.561%207.266a1.022%201.022%200%200%201-1.164%201.13c-1.047%200-1.459-.512-1.413-2.242c0-.375-3.984-.494-4.101%200c-.308%204.198%202.426%205.41%205.56%205.41C19.619%2026%2022%2024.45%2022%2021.658c0-4.973-6.653-4.842-6.653-7.31a1.08%201.08%200%200%201%201.243-1.13c.478%200%201.354.08%201.282%201.949%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%23ff4081%22%20d%3D%22m24.95%2028.948l-18-.9a1%201%200%200%201-.95-1V6.906a1%201%200%200%201%20.9-.995l18-1.905A1%201%200%200%201%2026%205v22.949a1%201%200%200%201-1.05.998Z%22%2F%3E%3Cpath%20fill%3D%22%23fafafa%22%20d%3D%22m20%208.52l.19-4.242l3.649-.275l.16%204.37a.28.28%200%200%201-.276.283a.3.3%200%200%201-.188-.063L22.123%207.52l-1.668%201.23a.29.29%200%200%201-.398-.055A.27.27%200%200%201%2020%208.52m-2.128%206.647c0%20.487%203.448.25%203.912-.094c0-3.324-1.87-5.073-5.298-5.073c-3.421%200-5.345%201.774-5.345%204.436c0%204.642%206.561%204.735%206.561%207.266a1.022%201.022%200%200%201-1.164%201.13c-1.047%200-1.459-.512-1.413-2.242c0-.375-3.984-.494-4.101%200c-.308%204.198%202.426%205.41%205.56%205.41C19.619%2026%2022%2024.45%2022%2021.658c0-4.973-6.653-4.842-6.653-7.31a1.08%201.08%200%200%201%201.243-1.13c.478%200%201.354.08%201.282%201.949%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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