Triple Threat Icons Documentation

By Matt Visiwig Oct 10, 2023

Triple Threat Icons uses SVG and CSS magic to create multi-state website icons, where these icons can have a regular, hover, and selected state. Hover or click to interact with the icons:

This documentation provides demos and code examples to help you get the most of these powerful icons.

You can access the free and premium icons here: Triple Threat SVG Icons.

How the icons work

From the above demo, these icons all look similar in style. That changes when you interact by either hovering over the icon’s button with your cursor or click on the icon’s button.

There are two methods to render these multi-state icons, and both methods rely on CSS.

• Inline SVG (Method 1)
  Use this method if you want control over the CSS style and :hover transitions.
  
• CSS background-image (Method 2)
  Use this method if you want less code in your HTML or need to reuse icons multiple times.

Special code for Inline SVG (Method 1)

Each icon is 2-3 icons packaged in one SVG. Each SVG requires a few lines of CSS to display the expected style for a given state, we do this by using the .SVGBGI class on the SVG. When exporting, use SVG > COPY to get the inline SVG code. You place the inline SVG code to be rendered in your HTML.

The CSS rules for multi-state (Triple Threat style):

.SVGBGI .outline,
.selected .SVGBGI .solid{fill:#000;} /* icon color */
a:not(.selected):hover .SVGBGI .accent{fill:#A2CAE9;} /* highlight color */
.selected .SVGBGI .outline,
.SVGBGI .solid,
.SVGBGI .accent{fill:none;}

The CSS rules for multi-state (Double Trouble style):

.SVGBGI .outline,
.selected .SVGBGI .solid{fill:#000;} /* icon color */
.selected .SVGBGI .outline,
.SVGBGI .solid{fill:none;}

Special code for CSS background-image (Method 2)

This method uses familiar HTML markup for icon systems: <i class="SVGBG-clock"></i>. When exporting, use CSS > COPY to get the CSS rules to place in your stylesheet. The great thing is your CSS gets cached just like images, BUT doesn’t add extra HTTP requests.

Displaying an icon (HTML)

<i class="SVGBG-clock"></i>
<a class="selected">
   <i class="SVGBG-clock"></i>
</a>

If you place the icon in a different tag, such as a button, make sure you update the CSS rule with the :hover. It should updated to begin with button:not(.selected):hover in that situation.