Add icons to default elementor tabs widget

elementor-tab-icons.css

/*-------------------------------------------------------------------------
* Elementor default tab widget does not have an option to use icons for tabs at the moment.
* But it will be too much to install a 3rd party addon just for a tabs widget to have icons in tabs.\
* We can add icons to default widget with just a little bit of CSS code.
* Copy below CSS code and add it your theme's stylesheet file or you can add it through Appearance > Customize > Additional CSS
* -------------------------------------------------------------------------
* Always use a custom class on any widget that you are going to customize
* We are using ".wpac-tab-icons" class on tabs widget
* -------------------------------------------------------------------------
*/
.wpac-tab-icons .elementor-tab-title a::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
/*
* Every tab has a unique ID, we will use those IDs to add different icons on each tab
* You can get those IDs by inspecting element on the page
*/
.wpac-tab-icons #elementor-tab-title-8381 a::before {
  /* Ths is the Unicode value of FontAwesome Icons, you can get it from https://fontawesome.com/icons */
	content: "\f05a";
}
.wpac-tab-icons #elementor-tab-title-8382 a::before {
	content: "\f144";
}
.wpac-tab-icons #elementor-tab-title-8383 a::before {
	content: "\f059";
}
.wpac-tab-icons #elementor-tab-title-8384 a::before {
	content: "\f086";
}

Thank you for this great code - I've been looking for a way without plugins.
It works beautifully.. :-)

Good, but changing all content links inside tab.

Building on this, which inspired my solution.

If like my case, it is not great for you to use id's for the tabs, and you need a common class to share across multiple Templates:

Added <span class="my-class-for-this-tab"></span> to the Title & Description field and then in Custom CSS target each tab with something like this. I prefer to use SVGs over FontAwesome but you could use content with FontAwesome too.

.my-class-for-this-tab::before{
      content: url(//mydomain.com/wp-content/uploads/2021/09/my_svg.svg);
}

Team,
Adding to this solution:
I also noticed that you can literally paste svg code into the Tab's "Title" field, it works great actually. (So it's actually inline, so it loads just a bit faster than an external file). See here: