storybook logo

storybook from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: storybook
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

storybookCatppuccin Icons storybookCoreUI Brands storybookFont Awesome Brands storybookSVG Logos storybookMaterial Icon Theme storybookSimple Icons

Use the storybook logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#ff4785" d="m107.346 2.012l-6.914.431l.539 14.377c.028.795-.889 1.259-1.514.766l-4.63-3.65l-5.485 4.162a.934.934 0 0 1-1.498-.784l.617-14.123L19.873 7.48a6.264 6.264 0 0 0-5.87 6.488l3.86 102.838a6.264 6.264 0 0 0 5.98 6.023l83.612 3.754a6.27 6.27 0 0 0 4.609-1.73a6.26 6.26 0 0 0 1.936-4.526V8.264a6.26 6.26 0 0 0-1.975-4.566a6.26 6.26 0 0 0-4.679-1.686m-41.46 21.187c16.308 0 25.214 8.723 25.214 25.319c-2.204 1.713-18.62 2.88-18.62.443c.346-9.3-3.817-9.707-6.13-9.707c-2.198 0-5.899.662-5.899 5.644c0 12.288 31.69 11.625 31.69 36.424c0 13.95-11.335 21.655-25.791 21.655c-14.92 0-27.957-6.036-26.485-26.963c.578-2.457 19.545-1.873 19.545 0c-.23 8.635 1.735 11.175 6.707 11.175c3.817 0 5.553-2.103 5.553-5.646c0-12.621-31.227-13.063-31.227-36.201c0-13.285 9.138-22.143 25.444-22.143z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconStorybook(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#ff4785" d="m107.346 2.012l-6.914.431l.539 14.377c.028.795-.889 1.259-1.514.766l-4.63-3.65l-5.485 4.162a.934.934 0 0 1-1.498-.784l.617-14.123L19.873 7.48a6.264 6.264 0 0 0-5.87 6.488l3.86 102.838a6.264 6.264 0 0 0 5.98 6.023l83.612 3.754a6.27 6.27 0 0 0 4.609-1.73a6.26 6.26 0 0 0 1.936-4.526V8.264a6.26 6.26 0 0 0-1.975-4.566a6.26 6.26 0 0 0-4.679-1.686m-41.46 21.187c16.308 0 25.214 8.723 25.214 25.319c-2.204 1.713-18.62 2.88-18.62.443c.346-9.3-3.817-9.707-6.13-9.707c-2.198 0-5.899.662-5.899 5.644c0 12.288 31.69 11.625 31.69 36.424c0 13.95-11.335 21.655-25.791 21.655c-14.92 0-27.957-6.036-26.485-26.963c.578-2.457 19.545-1.873 19.545 0c-.23 8.635 1.735 11.175 6.707 11.175c3.817 0 5.553-2.103 5.553-5.646c0-12.621-31.227-13.063-31.227-36.201c0-13.285 9.138-22.143 25.444-22.143z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#ff4785" d="m107.346 2.012l-6.914.431l.539 14.377c.028.795-.889 1.259-1.514.766l-4.63-3.65l-5.485 4.162a.934.934 0 0 1-1.498-.784l.617-14.123L19.873 7.48a6.264 6.264 0 0 0-5.87 6.488l3.86 102.838a6.264 6.264 0 0 0 5.98 6.023l83.612 3.754a6.27 6.27 0 0 0 4.609-1.73a6.26 6.26 0 0 0 1.936-4.526V8.264a6.26 6.26 0 0 0-1.975-4.566a6.26 6.26 0 0 0-4.679-1.686m-41.46 21.187c16.308 0 25.214 8.723 25.214 25.319c-2.204 1.713-18.62 2.88-18.62.443c.346-9.3-3.817-9.707-6.13-9.707c-2.198 0-5.899.662-5.899 5.644c0 12.288 31.69 11.625 31.69 36.424c0 13.95-11.335 21.655-25.791 21.655c-14.92 0-27.957-6.036-26.485-26.963c.578-2.457 19.545-1.873 19.545 0c-.23 8.635 1.735 11.175 6.707 11.175c3.817 0 5.553-2.103 5.553-5.646c0-12.621-31.227-13.063-31.227-36.201c0-13.285 9.138-22.143 25.444-22.143z"/></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%20128%20128%22%3E%3Cpath%20fill%3D%22%23ff4785%22%20d%3D%22m107.346%202.012l-6.914.431l.539%2014.377c.028.795-.889%201.259-1.514.766l-4.63-3.65l-5.485%204.162a.934.934%200%200%201-1.498-.784l.617-14.123L19.873%207.48a6.264%206.264%200%200%200-5.87%206.488l3.86%20102.838a6.264%206.264%200%200%200%205.98%206.023l83.612%203.754a6.27%206.27%200%200%200%204.609-1.73a6.26%206.26%200%200%200%201.936-4.526V8.264a6.26%206.26%200%200%200-1.975-4.566a6.26%206.26%200%200%200-4.679-1.686m-41.46%2021.187c16.308%200%2025.214%208.723%2025.214%2025.319c-2.204%201.713-18.62%202.88-18.62.443c.346-9.3-3.817-9.707-6.13-9.707c-2.198%200-5.899.662-5.899%205.644c0%2012.288%2031.69%2011.625%2031.69%2036.424c0%2013.95-11.335%2021.655-25.791%2021.655c-14.92%200-27.957-6.036-26.485-26.963c.578-2.457%2019.545-1.873%2019.545%200c-.23%208.635%201.735%2011.175%206.707%2011.175c3.817%200%205.553-2.103%205.553-5.646c0-12.621-31.227-13.063-31.227-36.201c0-13.285%209.138-22.143%2025.444-22.143z%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%20128%20128%22%3E%3Cpath%20fill%3D%22%23ff4785%22%20d%3D%22m107.346%202.012l-6.914.431l.539%2014.377c.028.795-.889%201.259-1.514.766l-4.63-3.65l-5.485%204.162a.934.934%200%200%201-1.498-.784l.617-14.123L19.873%207.48a6.264%206.264%200%200%200-5.87%206.488l3.86%20102.838a6.264%206.264%200%200%200%205.98%206.023l83.612%203.754a6.27%206.27%200%200%200%204.609-1.73a6.26%206.26%200%200%200%201.936-4.526V8.264a6.26%206.26%200%200%200-1.975-4.566a6.26%206.26%200%200%200-4.679-1.686m-41.46%2021.187c16.308%200%2025.214%208.723%2025.214%2025.319c-2.204%201.713-18.62%202.88-18.62.443c.346-9.3-3.817-9.707-6.13-9.707c-2.198%200-5.899.662-5.899%205.644c0%2012.288%2031.69%2011.625%2031.69%2036.424c0%2013.95-11.335%2021.655-25.791%2021.655c-14.92%200-27.957-6.036-26.485-26.963c.578-2.457%2019.545-1.873%2019.545%200c-.23%208.635%201.735%2011.175%206.707%2011.175c3.817%200%205.553-2.103%205.553-5.646c0-12.621-31.227-13.063-31.227-36.201c0-13.285%209.138-22.143%2025.444-22.143z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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