@ds-kit/logo

---

title: "Logo" slug: "/packages/logo" category: "image" componentNames:

• "Logo"

---

Logo

Use the logo component to render an SVG version of the Datastory logo.

import Logo from "@ds-kit/logo"

Basic example

Without any custom properties the logo component will render the datastory logo in datastory blurble.

<Logo />

Custom size

The standard size for the logo is 2.5rem, or 40px. You can set a manual size for the logo if necessary using the size prop.

<>
  <Logo size="10rem" />
  <Logo size="5rem" />
  <Logo size="2.5rem" />
</>

Custom colors

You can specify custom colors for the badge (bg), and for the "d" (color).

<>
  <Logo bg="green.400" />
  <Logo outlined color="primary" />
</>

Custom text

To brand

<>
  <Logo text="Skolkartan" />
  <Logo text="Skolkartan" textColor="grey.100" />
  <Logo text="Skolkartan" size="6rem" />
</>