Let us use our own icons

[PatrickMast]

Hello,

Retool's default sets of Icons are great!

But.. Can you also have the ability to upload and use our own icons?
Maybe something like this?

Thanks!

Patrick

[ScottR]

You can use your own icons but it depends on where....
I use Control Command and Space bar (on Mac)

[PatrickMast]

Thanks @ScottR, but I'd like to be able to upload my own icons also.

[vinnie]

Uploaded OR just using a cdn link would be great.

Here's a little workaround that may or may not work for your purposes.

Just using the default data in Custom Component, I replaced the @import (url) with a link to Font Awesome. I didn't edit anything else except adding <i class="fa-brands fa-facebook"></i> as the title of the component. Only downside is that it's usage is restricted to the custom component. My guess is the icon isn't important enough to go around creating your own custom components, but maybe so if you're a developer and that's an easy thing for you.

<style>
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }

  * {
    font-family: 'Inter', sans-serif;
  }

  body {
    margin: 0;
  }

  #react {
    height: 100%;
    width: 100%;
  }

  .card {
    min-width: 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
  }

  .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 24px;
  }

  .title {
    font-size: 18px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .docs-link {
    font-size: 12px;
    font-weight: 500;
    color: #b062bc;
    text-decoration: none;
  }

  .docs-link:hover {
    color: #9846a4;
  }

  .content {
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #777777;
  }

  .button-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  .button {
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    appearance: none;
    user-select: auto;
  }

  .button--main {
    background-color: #b062bc;
    color: #ffffff;
  }

  .button--main:hover {
    background-color: #9846a4;
  }

  .button--secondary {
    color: #b062bc;
    background-color: white;
    border: 1px solid #b062bc;
  }

  .button--secondary:hover {
    color: #9846a4;
    border: 1px solid #9846a4;
  }
</style>

<!-- You can add any HTML/CSS/JS here. UMD versions are required.
Keep in mind that Custom Components are sensitive to bundle sizes, so try using a
custom implementation when possible. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="react"></div>

<script type="text/babel">
  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <div className="card">
      <div className="title-container">
        <div className="title"><i class="fa-brands fa-facebook"></i></div>
        <a href="https://docs.retool.com/docs/custom-components" className="docs-link">View docs</a>
      </div>
      <div className="content">
        {/* The text below is dynamic and specified by the model. */}
        {model.displayText}
      </div>
      <div className="button-container">
        {/* This button fires a dynamic query (specified in the model) when clicked. */}
        <button
          className="button button--main"
          onClick={() => triggerQuery(model.queryToTrigger)}
        >
          Trigger query
        </button>

        {/* This button updates the model when clicked. */}
        <button
          className="button button--secondary"
          onClick={() => modelUpdate({ displayText: 'The body of this text references "model.displayText", which just changed!' })}
        >
          Update model
        </button>
      </div>
    </div>
  )

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)
</script>

[PatrickMast]

Hey @vinnie, thank you for the workaround. Looks awesome!
But I still think we need a native solution here. @retool-team

Patrick

[JayL]

@PatrickMast Just linked an existing Feature Request for custom icons to this Community Post. We'll be sure to update you when it ships!

[PatrickMast]

Thank you @JayL!

[slaw]

I just want a bike icon...

[stewart.anstey]

I don't know why it doesn't come with Font Awesome as the default.

Could we please have decent searching on icons by name? It's absolutely useless and I have to scroll through to find anything.

Thanks,

[shawnhoffman]

Any updates here? Need X instead of Twitter's old logo, TikTok, and a handful of others. These are some of the most popular social networks in the world and there's no way t

[erispoe]

+1 for uploading / using our own icons

[AbbeyHernandez]

Great point @shawnhoffman! I will push for the X logo with our team! No updates for custom icons as of now, But I will log the +9 from your comment and @erispoe.

[Kyle_Follett]

+1 this would be awesome to use our own icon set.

[Milan_Kalem]

Instagram icon seems to be missing too

[AbbeyHernandez]

Noted, thank you!

[Nick1]

+1

[erispoe]

No sparkle either. It's quickly becoming the universal sign for AI.