> ## Documentation Index
> Fetch the complete documentation index at: https://docs.assistantscenter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> An Object which contains all the icons used in the website.

```js theme={null}
theme: SoftUI({
  icons: {
    backgroundImage: String,
    favicon: String,
    noGuildIcon: String,
    sidebar: {
      darkUrl: String,
      lightUrl: String,
      hideName: Boolean,
      borderRadius: Boolean,
      alignCenter: Boolean,
    },
  },
});
```

## Example Usage

```js theme={null}
theme: SoftUI({
  icons: {
    backgroundImage:
      "https://www.imageshine.in/uploads/gallery/geometric-Blue-Wallpaper-Free-Download.jpg",
    favicon:
      "https://assistantscenter.com/wp-content/uploads/2021/11/cropped-cropped-logov6.png",
    noGuildIcon:
      "https://static-00.iconduck.com/assets.00/discord-icon-2048x2048-nnt62s2u.png",
    sidebar: {
      darkUrl:
        "https://assistantscenter.com/api/user/avatar/63ad65e2d3f1b1b3acdff794",
      lightUrl:
        "https://assistantscenter.com/api/user/avatar/63ad65e2d3f1b1b3acdff794",
      hideName: true,
      borderRadius: false,
      alignCenter: true,
    },
  },
});
```

## Image

<Tabs>
  <Tab title="backgroundImage">
    <Frame type="glass" caption="backgroundImage">
      <img src="https://mintcdn.com/assistantscenter/e0fzjuWUPc5-sSJC/images/content/backgroundImage.jpg?fit=max&auto=format&n=e0fzjuWUPc5-sSJC&q=85&s=93fa99be2a9dd27a0ad1f7d769a17f08" width="2056" height="617" data-path="images/content/backgroundImage.jpg" />
    </Frame>
  </Tab>

  <Tab title="favicon">
    <Frame type="glass" caption="favicon">
      <img src="https://mintcdn.com/assistantscenter/e0fzjuWUPc5-sSJC/images/content/favicon.jpg?fit=max&auto=format&n=e0fzjuWUPc5-sSJC&q=85&s=66b7d82e8cb6d15198886420c55a98a8" width="202" height="53" data-path="images/content/favicon.jpg" />
    </Frame>
  </Tab>

  <Tab title="noGuildIcon">
    <Frame type="glass" caption="noGuildIcon">
      <img src="https://mintcdn.com/assistantscenter/e0fzjuWUPc5-sSJC/images/content/noGuildIcon.jpg?fit=max&auto=format&n=e0fzjuWUPc5-sSJC&q=85&s=9f8130e3dc74815f5d348bbb4a3a3ab9" width="2043" height="523" data-path="images/content/noGuildIcon.jpg" />
    </Frame>
  </Tab>

  <Tab title="sidebar">
    <Frame type="glass" caption="sidebar.darkUrl and sidebar.lightUrl">
      <img src="https://mintcdn.com/assistantscenter/e0fzjuWUPc5-sSJC/images/content/sidebar.jpg?fit=max&auto=format&n=e0fzjuWUPc5-sSJC&q=85&s=35ad4969a340ea92a6b24c1feaa502df" width="307" height="162" data-path="images/content/sidebar.jpg" />
    </Frame>
  </Tab>
</Tabs>

## Props

<ResponseField name="backgroundImage" type="string" required>
  The background image of the website
</ResponseField>

<ResponseField name="favicon" type="string" required>
  The favicon of the website
</ResponseField>

<ResponseField name="noGuildIcon" type="string" required>
  The image of a guild with no icon
</ResponseField>

<ResponseField name="sidebar" type="Object" required>
  <Expandable title="properties" defaultOpen>
    <ResponseField name="darkUrl" type="string" required>
      The icon of the website when using dark mode
    </ResponseField>

    <ResponseField name="lightUrl" type="string" required>
      The icon of the website when using light mode
    </ResponseField>

    <ResponseField name="hideName" type="boolean" required>
      Whether you'd like to hide the website name next to the icon
    </ResponseField>

    <ResponseField name="borderRadius" type="boolean | number" required>
      Whether you'd like to set the border radius of the icon
    </ResponseField>

    <ResponseField name="alignCenter" type="boolean" required>
      Whether you'd like to align the icon to the center
    </ResponseField>
  </Expandable>
</ResponseField>

If you want to disable the border radius, you can do so by setting this to false.

```js theme={null}
theme: SoftUI({
  icons: {
    sidebar: {
      borderRadius: false,
    },
  },
});
```