Combine two icons create one single-color shape, thanks to the power of SVG+JS! Use it with Power Transforms for some really awesome effects.
Advertisement
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Before You Get Started Make sure you're:
Masks are great when you do want your background color to show through . For clarity in the example, we’ve added a background color on the icon so you can see the effect.
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
To accomplish the masking some SVG definitions are generated. You can control the ID's used by specifying data-fa-mask-id
. (Available in 5.12.2 or later.)
Masking components How it works Inner Icon (cut out) Set using typical class
attribute. Transform using any data-fa-transform
properties. Outer Icon Set using data-fa-mask
attribute on the Inner Icon. ID used in defs Set using data-fa-mask-id
(Available in 5.12.2 or later)