Skip to main content

Salesforce

Adding Your Style: Custom Icons in Salesforce LWC

Hands Typing On Laptop Computer

Aloha trailblazers!

Let’s talk about jazzing up your Lightning Web Components (LWC) with a personal touch – custom icons. You know, those tiny visual cues that can make a big difference in how users interact with your app. Salesforce has a solid library of standard icons, but why not sprinkle in some of your own flair?

Why Custom Icons?

First things first, let’s understand what we’re working with. Custom icons are like the artist’s brushstrokes in your UI canvas. They’re usually SVG files, which means they’re crisp, clear, and look great on any screen.

How to Bring Your Icons to Life

Get Your Icons Ready
Before you can start, you’ll need your custom icons. You can whip them up using design software or snag them from your favorite icon library. Just make sure they’re in SVG format – that’s key.

Upload to Static Resources

Now, let’s get those icons into Salesforce. Head over to “Setup” > “Static Resources” and upload your SVG files. This gives your LWC access to those snazzy icons.

Static Resource Creation Step 1

You can set them up as public or private depending upon your requirement.

Creating A Static Resource

Drop Them into Your LWC Markup

You will first have to associate an ID with an SVG file. This will ensure that our component gets a hold of the correct icon from a bunch of custom static URLs available.

Icon Svg File

In your JavaScript file, you must first import the static resource containing your custom icon. Once you’ve imported it, make sure to initialize it with proper values inside our connected call-back hook.

Be aware that while initializing you will have to associate the same ID that you had associated with the SVG file. In our case, we have labeled the ID as “demo”.

Customicon Javascript Snap

Once the imports and initializations are in place, we will put them to use.

Remember we cannot use the custom icon in <lightning-icon> context, we have to either use it as an image or an <svg> as below.

Customicon Html Snap

Now that we have all our files ready, we have to check the visibility via the XML file.

And then you are ready to use your custom icons!

Customicon Xml Snap

Style and Use it!
Now that your icons are in place, feel free to play around with styles. Change colors, adjust sizes, or position them just right to fit your app’s vibe. This is where you let your creativity shine!

 

Why Custom Icons Are Preferred

  • Brand Vibes: Inject your brand’s personality into your Salesforce app and keep things consistent with your overall look and feel.
  • User Delight: Users love familiarity. Custom icons make navigation a breeze and add that extra dash of delight to their experience.
  • Unleash Your Creativity: With custom icons, you’re not bound by the stock stuff. Go wild, express yourself, and make your app truly yours.

 

Wrapping it Up

Custom icons might seem like a small detail, but they can pack a punch in your Salesforce LWC. Follow these steps, get creative, and watch your app come to life in ways you never imagined. It’s time to stand out from the crowd and make your mark in the Salesforce ecosystem. Happy coding!

Enjoyed reading this blog? Dive deeper into our collection of informative articles and tutorials. Here are some recommendations for you:

How to Use SLDS Design Tokens in a Custom Lightning Community Theme

Salesforce Documentation

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Reena Joseph

Reena Joseph, our Senior Technical Consultant at Perficient, boasts 3.5 years of experience and holds the prestigious 3x Salesforce Certified title. Her trailblazing spirit is evident with 100 badges on Trailheads, showcasing her commitment to continuous learning. Not limited to Salesforce, Reena has also mastered SQL and Programming in HTML5 with JavaScript and CSS3 on Hacker Rank. Beyond certifications, her passion for staying abreast of technological advancements is seen in her avid reading habits. In the dynamic tech world, Reena Joseph stands ready to drive innovation and inspire with her dedication to excellence.

More from this Author

Categories
Follow Us