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
3 Likes
You can use your own icons but it depends on where....
I use 
Control Command and Space bar (on Mac)
Thanks @ScottR, but I'd like to be able to upload my own icons also.
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>
1 Like
Hey @vinnie, thank you for the workaround. Looks awesome!
But I still think we need a native solution here. @retool-team
Patrick
1 Like
@PatrickMast Just linked an existing Feature Request for custom icons to this Community Post. We'll be sure to update you when it ships!
2 Likes
Thank you @JayL!
I just want a bike icon...
1 Like
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,
3 Likes
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
7 Likes
+1 for uploading / using our own icons
2 Likes
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.
1 Like
+1 this would be awesome to use our own icon set.
4 Likes
Instagram icon seems to be missing too
1 Like
Noted, thank you!
1 Like
+1
3 Likes
No sparkle either. It's quickly becoming the universal sign for AI.
2 Likes
Is there at least a decent way to get a list of all the icons? The in-app search being terrible, I'love to be able to at least export the list to choose.
Does this really old forum post still work?
mark
(Retool Team)
Jan '21
For anyone who may be looking for this in the future, as an alternative, you are now able to add the following line to your “Preloaded CSS” under Advanced Settings, to use a CDN hosted version of FontAwesome 5.
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css)
Hi Retool team! Is there any update on this request? It's a huge blocker for us (the lack of custom icons; the search is just inconvenient) and it would be great to know if a solution is coming or if we should start finding another work around. The linked thread has not been updated since January, so just following up here as well. Thanks in advance for any info!