storybook logo

storybook from Font Awesome Brands by Dave Gandy · Brand · CC-BY-4.0 Attribution required.

Name: storybook
Set: Font Awesome Brands
Style: Brand
Viewbox: 640×640
License: CC BY 4.0

The same logo in other sets

storybookCatppuccin Icons storybookCoreUI Brands storybookDevicon 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 640 640"><path fill="currentColor" d="m106.5 99.1l16.5 439c.5 13.9 11.6 25.1 25.5 25.7l357 16h1.2c14.8 0 26.7-12 26.7-26.7V74.7c0-.6 0-1.1-.1-1.7c-.9-14.7-13.6-25.9-28.4-25l-29.4 1.8l2.1 61.4c.1 2.2-1.6 4-3.8 4.1c-.9 0-1.9-.3-2.6-.9L451.6 99l-23.4 17.7c-1.8 1.3-4.3 1-5.6-.8c-.6-.7-.8-1.6-.8-2.6l2.5-60.2l-292.7 18.3c-14.5.9-25.6 13.2-25.1 27.7m329.2 152.7c-9.4 7.3-79.5 12.3-79.5 1.9c1.5-39.7-16.3-41.4-26.2-41.4c-9.4 0-25.2 2.8-25.2 24.1c0 21.7 23.1 33.9 50.2 48.3c38.5 20.4 85.1 45.1 85.1 107.2c0 59.6-48.4 92.5-110.1 92.5c-63.7 0-119.4-25.8-113.1-115.1c2.5-10.5 83.4-8 83.4 0c-1 36.9 7.4 47.7 28.6 47.7c16.3 0 23.7-9 23.7-24.1c0-22.9-24.1-36.4-51.7-51.9c-37.5-21-81.6-45.8-81.6-102.6c0-56.7 39-94.5 108.6-94.5S435.5 181.1 435.5 252z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7BrandsStorybook(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m106.5 99.1l16.5 439c.5 13.9 11.6 25.1 25.5 25.7l357 16h1.2c14.8 0 26.7-12 26.7-26.7V74.7c0-.6 0-1.1-.1-1.7c-.9-14.7-13.6-25.9-28.4-25l-29.4 1.8l2.1 61.4c.1 2.2-1.6 4-3.8 4.1c-.9 0-1.9-.3-2.6-.9L451.6 99l-23.4 17.7c-1.8 1.3-4.3 1-5.6-.8c-.6-.7-.8-1.6-.8-2.6l2.5-60.2l-292.7 18.3c-14.5.9-25.6 13.2-25.1 27.7m329.2 152.7c-9.4 7.3-79.5 12.3-79.5 1.9c1.5-39.7-16.3-41.4-26.2-41.4c-9.4 0-25.2 2.8-25.2 24.1c0 21.7 23.1 33.9 50.2 48.3c38.5 20.4 85.1 45.1 85.1 107.2c0 59.6-48.4 92.5-110.1 92.5c-63.7 0-119.4-25.8-113.1-115.1c2.5-10.5 83.4-8 83.4 0c-1 36.9 7.4 47.7 28.6 47.7c16.3 0 23.7-9 23.7-24.1c0-22.9-24.1-36.4-51.7-51.9c-37.5-21-81.6-45.8-81.6-102.6c0-56.7 39-94.5 108.6-94.5S435.5 181.1 435.5 252z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m106.5 99.1l16.5 439c.5 13.9 11.6 25.1 25.5 25.7l357 16h1.2c14.8 0 26.7-12 26.7-26.7V74.7c0-.6 0-1.1-.1-1.7c-.9-14.7-13.6-25.9-28.4-25l-29.4 1.8l2.1 61.4c.1 2.2-1.6 4-3.8 4.1c-.9 0-1.9-.3-2.6-.9L451.6 99l-23.4 17.7c-1.8 1.3-4.3 1-5.6-.8c-.6-.7-.8-1.6-.8-2.6l2.5-60.2l-292.7 18.3c-14.5.9-25.6 13.2-25.1 27.7m329.2 152.7c-9.4 7.3-79.5 12.3-79.5 1.9c1.5-39.7-16.3-41.4-26.2-41.4c-9.4 0-25.2 2.8-25.2 24.1c0 21.7 23.1 33.9 50.2 48.3c38.5 20.4 85.1 45.1 85.1 107.2c0 59.6-48.4 92.5-110.1 92.5c-63.7 0-119.4-25.8-113.1-115.1c2.5-10.5 83.4-8 83.4 0c-1 36.9 7.4 47.7 28.6 47.7c16.3 0 23.7-9 23.7-24.1c0-22.9-24.1-36.4-51.7-51.9c-37.5-21-81.6-45.8-81.6-102.6c0-56.7 39-94.5 108.6-94.5S435.5 181.1 435.5 252z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m106.5%2099.1l16.5%20439c.5%2013.9%2011.6%2025.1%2025.5%2025.7l357%2016h1.2c14.8%200%2026.7-12%2026.7-26.7V74.7c0-.6%200-1.1-.1-1.7c-.9-14.7-13.6-25.9-28.4-25l-29.4%201.8l2.1%2061.4c.1%202.2-1.6%204-3.8%204.1c-.9%200-1.9-.3-2.6-.9L451.6%2099l-23.4%2017.7c-1.8%201.3-4.3%201-5.6-.8c-.6-.7-.8-1.6-.8-2.6l2.5-60.2l-292.7%2018.3c-14.5.9-25.6%2013.2-25.1%2027.7m329.2%20152.7c-9.4%207.3-79.5%2012.3-79.5%201.9c1.5-39.7-16.3-41.4-26.2-41.4c-9.4%200-25.2%202.8-25.2%2024.1c0%2021.7%2023.1%2033.9%2050.2%2048.3c38.5%2020.4%2085.1%2045.1%2085.1%20107.2c0%2059.6-48.4%2092.5-110.1%2092.5c-63.7%200-119.4-25.8-113.1-115.1c2.5-10.5%2083.4-8%2083.4%200c-1%2036.9%207.4%2047.7%2028.6%2047.7c16.3%200%2023.7-9%2023.7-24.1c0-22.9-24.1-36.4-51.7-51.9c-37.5-21-81.6-45.8-81.6-102.6c0-56.7%2039-94.5%20108.6-94.5S435.5%20181.1%20435.5%20252z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m106.5%2099.1l16.5%20439c.5%2013.9%2011.6%2025.1%2025.5%2025.7l357%2016h1.2c14.8%200%2026.7-12%2026.7-26.7V74.7c0-.6%200-1.1-.1-1.7c-.9-14.7-13.6-25.9-28.4-25l-29.4%201.8l2.1%2061.4c.1%202.2-1.6%204-3.8%204.1c-.9%200-1.9-.3-2.6-.9L451.6%2099l-23.4%2017.7c-1.8%201.3-4.3%201-5.6-.8c-.6-.7-.8-1.6-.8-2.6l2.5-60.2l-292.7%2018.3c-14.5.9-25.6%2013.2-25.1%2027.7m329.2%20152.7c-9.4%207.3-79.5%2012.3-79.5%201.9c1.5-39.7-16.3-41.4-26.2-41.4c-9.4%200-25.2%202.8-25.2%2024.1c0%2021.7%2023.1%2033.9%2050.2%2048.3c38.5%2020.4%2085.1%2045.1%2085.1%20107.2c0%2059.6-48.4%2092.5-110.1%2092.5c-63.7%200-119.4-25.8-113.1-115.1c2.5-10.5%2083.4-8%2083.4%200c-1%2036.9%207.4%2047.7%2028.6%2047.7c16.3%200%2023.7-9%2023.7-24.1c0-22.9-24.1-36.4-51.7-51.9c-37.5-21-81.6-45.8-81.6-102.6c0-56.7%2039-94.5%20108.6-94.5S435.5%20181.1%20435.5%20252z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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