Product Name

To use the 3-4 color icons, please add an additional span inside of your <i> tags
Font Awesome (5.8.2) - In addition to the icons below, we also have access to the font awesome pro icons.

To update to the newest version, clone this repo and follow the instructions.
New icons should be placed in /lumen-design-system/semantic/src/themes/default/ ..etc.
NOTE: be sure not to replace/remove semantic/src/themes/default/assets/fonts/ClickFunnelsIcons (various file types)

Font Awesome Icons New in 5.8+

magnet
eraser
Show Code 
    <i class="magnet icon"></i> magnet<br>
    <i class="eraser icon"></i> eraser<br>

Note: Font awesome classes with dashes (some-icon) are stripped into spaces in Lumen (some icon). This does not include numerical names (repeat-1) which will stay the same

Show Code 
    <i class="repeat icon"></i>
    <i class="repeat-1 icon"></i>
    <i class="repeat-1 alternate icon"></i>

Hoverable Icons

A grey icon is just a grey:
Show Code 
    <i class="grey cog icon fitted"></i>
unless you ad a .hoverable class
Show Code 
    <i class="grey hoverable cog icon"></i>

This will be hoverable with or without an anchor wrap
With Anchor: Without:
Show Code 
    <a href=""><i class="grey hoverable cog icon"></i></a>
additionally .fitted will remove the margin from the icon to prevent extra space in the anchor creating an underline on hover. Try hovering in from the right slowly:
with .fitted: without: Show Code 
    <a href=""><i class="grey hoverable cog icon fitted"></i></a>

Stacked Icons

Show Code 
  <i class="ui big icons">
    <i class="thin inverted blue circular icon"></i>
    <i class="clickfunnels layered white logo icon">
      <span></span>
    </i>
  </i>

  <i class="ui big icons">
    <i class="thin circular icon"></i>
    <i class="clickfunnels layered logo icon">
      <span></span>
    </i>
  </i>
NOTE: Circle icons are white by default

Corner Icons

icons with a .corner class will become a smaller icon in the corner specified


Show Code 
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="top left corner circular blue inverted retweet icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin blue inverted circular icon"></i>
        <i class="clickfunnels layered actionetics icon"></i>
        <i class="top right corner circular long arrow alternate right icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="bottom left corner circular blue inverted retweet icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin blue inverted circular icon"></i>
        <i class="clickfunnels layered actionetics icon"></i>
        <i class="bottom right corner circular long arrow alternate right icon" data-content="This integration is a resend"></i>
      </i>
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="top left corner red exclamation triangle icon" data-content="This integration is not complete"></i>
      </i>

Same exact html as above just on gray:

Non-circular example:

Show Code 
        <i class="huge icons">
          <i class="puzzle icon"></i>
          <i class="top left corner add icon"></i>
        </i>
        <i class="huge icons">
          <i class="puzzle icon"></i>
          <i class="top right corner add icon"></i>
        </i>
        <i class="huge icons">
          <i class="puzzle icon"></i>
          <i class="bottom left corner add icon"></i>
        </i>
        <i class="huge icons">
          <i class="puzzle icon"></i>
          <i class="bottom right corner add icon"></i>
        </i>

.small (corner) icons

Show Code 
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="top left corner circular blue inverted retweet icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin blue inverted circular icon"></i>
        <i class="clickfunnels layered actionetics icon"></i>
        <i class="top right corner circular long arrow alternate right icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="bottom left corner circular blue inverted retweet icon" data-content="This integration is a resend"></i>
      </i>    
      <i class="ui big icons">
        <i class="thin blue inverted circular icon"></i>
        <i class="clickfunnels layered actionetics icon"></i>
        <i class="bottom right corner circular long arrow alternate right icon" data-content="This integration is a resend"></i>
      </i>
      <i class="ui big icons">
        <i class="thin circular icon"></i>
        <i class="clickfunnels layered email-messenger icon"></i>
        <i class="top left corner red exclamation triangle icon" data-content="This integration is not complete"></i>
      </i>

Clickfunnels Icons

clickfunnels layered white logo icon > span
clickfunnels layered actionetics icon
Show Code 
   <i class="huge clickfunnels layered actionetics icon"></i>
clickfunnels layered actionetics-md icon > span
Show Code 
    <i class="huge clickfunnels layered actionetics-md icon"><span></span></i>
clickfunnels layered backpack icon > span
Show Code 
    <i class="huge clickfunnels layered backpack icon"><span></span></i>
clickfunnels layered desktop-messenger icon
Show Code 
    <i class="huge clickfunnels layered desktop-messenger icon"></i>
clickfunnels layered email-messenger icon
Show Code 
    <i class="huge clickfunnels layered email-messenger icon"></i>
clickfunnels layered follow-up-funnel icon
Show Code 
    <i class="huge clickfunnels layered follow-up-funnel icon"></i>
clickfunnels layered funnel-messenger icon
Show Code 
    <i class="huge clickfunnels layered funnel-messenger icon"></i>
clickfunnels layered logo icon > span
Show Code 
    <i class="huge clickfunnels layered logo icon"><span></span></i>
clickfunnels layered mobile-messenger icon
Show Code 
    <i class="huge clickfunnels layered mobile-messenger icon"></i>
clickfunnels layered project-management icon > span
Show Code 
    <i class="huge clickfunnels layered project-management icon"><span></span></i>
clickfunnels layered retargeting-messenger icon
Show Code 
    <i class="huge clickfunnels layered retargeting-messenger icon"></i>
clickfunnels layered social-messenger icon
Show Code 
    <i class="huge clickfunnels layered social-messenger icon"></i>
clickfunnels account-billing icon
clickfunnels account-detail icon
clickfunnels account-sharing icon
clickfunnels actionetics icon
clickfunnels actionetics-md icon
clickfunnels add-contact icon
clickfunnels affiliate icon
clickfunnels affiliate-types icon
clickfunnels archived icon
clickfunnels automation icon
clickfunnels backpack icon
clickfunnels bounced icon
clickfunnels broadcast icon
clickfunnels caution icon
clickfunnels checklist icon
clickfunnels clickbot icon
clickfunnels clicked icon
clickfunnels clickpop icon
clickfunnels clone icon
clickfunnels column-filter icon
clickfunnels commission icon
clickfunnels commission-plan icon
clickfunnels contacts icon
clickfunnels dashboard icon
clickfunnels delete icon
clickfunnels delete-x icon
clickfunnels desktop-messenger icon
clickfunnels digital-assets icon
clickfunnels docs icon
clickfunnels domains icon
clickfunnels download icon
clickfunnels edit icon
clickfunnels ellipsis icon
clickfunnels email-lists icon
clickfunnels email-messenger icon
clickfunnels favorites icon
clickfunnels follow-up-funnel icon
clickfunnels funnel icon
clickfunnels funnel-messenger icon
clickfunnels get-help icon
clickfunnels global-unsubscriber icon
clickfunnels group-toggle icon
clickfunnels handle icon
clickfunnels happy icon
clickfunnels help icon
clickfunnels import icon
clickfunnels integration icon
clickfunnels integration activecampaign icon
clickfunnels integration aweber icon
clickfunnels integration constant-contact icon
clickfunnels integration convertkit icon
clickfunnels integration drip icon
clickfunnels integration facebook icon
clickfunnels integration hubspot icon
clickfunnels integration infusionsoft icon
clickfunnels integration kajabi icon
clickfunnels integration mailchimp icon
clickfunnels integration ontraport icon
clickfunnels integration response icon
clickfunnels integration salesforce icon
clickfunnels integration sendlane icon
clickfunnels integration shipstation icon
clickfunnels integration shopify icon
clickfunnels integration twilio icon
clickfunnels integration webhooks icon
clickfunnels leaderboard icon
clickfunnels link icon
clickfunnels list-toggle icon
clickfunnels live-contact-activity icon
clickfunnels lock icon
clickfunnels logo icon
clickfunnels management icon
clickfunnels managers icon
clickfunnels membership-area icon
clickfunnels mobile-messenger icon
clickfunnels my-account icon
clickfunnels notification icon
clickfunnels optin icon
clickfunnels order icon
clickfunnels order-confirmation icon
clickfunnels oto icon
clickfunnels outgoing-smtp icon
clickfunnels paused icon
clickfunnels payment-gateway icon
clickfunnels personal-page-templates icon
clickfunnels phone icon
clickfunnels preview-page icon
clickfunnels product icon
clickfunnels project-manager icon
clickfunnels publishing icon
clickfunnels queued icon
clickfunnels requests icon
clickfunnels retargeting-messenger icon
clickfunnels sales icon
clickfunnels search icon
clickfunnels secure icon
clickfunnels setting icon
clickfunnels settings icon
clickfunnels social-messenger icon
clickfunnels stats icon
clickfunnels tag icon
clickfunnels time icon
clickfunnels tip-help icon
clickfunnels unique-opens icon
clickfunnels upload icon
clickfunnels views icon
clickfunnels webinar-broadcast-room icon
clickfunnels webinar-registration icon