Graphic Elements

Icons

For full general and category icon options (both fill and stroke), please refer to: smb://nyfs01/Creative/_CREATIVE_RESOURCES/Illustrations/_The_Knot/tk-icons

General Icons

These are representative of clickable actions. For most use cases, icons should be 20x20px, tap area 44x44px, and in new blue.

• Account Settings .icon-tool-acctsettings
• Settings .icon-general-settings
• Calendar .icon-general-calendar
• Print .icon-general-print
• Info .icon-general-info
• Close .icon-general-close
• Edit .icon-general-edit
• Refresh .icon-general-refresh
• Current Location .icon-general-current-location
• Map .icon-general-map
• Filter .icon-general-filter
• Phone .icon-general-phone
• Heart Filled .icon-general-heart
• Hamburger .icon-general-hamburger
• Search .icon-general-search
• Email .icon-general-email
• Share .icon-general-share
• Tag .icon-general-tag
• Plus .icon-general-plus
• minus .icon-general-minus
• Checkmark .icon-general-checkmark
• Toolbox .icon-general-toolbox

Conversations Icons

These are representative of whether or not new conversations exist.

• Active Conversations .icon-conversations-active
• No Active Conversations .icon-conversations-inactive

Tool Icons

These are representative of tools on theknot.com users can visit to plan their wedding.

• Community .icon-tool-community
• Vendor List .icon-tools-vendor-list
• Guest List Manager .icon-tool-guest-list-manager
• Wedding Websites .icon-tool-wedding-websites
• Budgeter .icon-tool-budgeter
• Checklist .icon-tool-checklist
• registry .icon-tool-registry

Vendor Category Icons

• Accessories .icon-vendor-acc
• Bed and Breakfasts .icon-vendor-bnb
• Boudoir Photographers .icon-vendor-bph
• Decor .icon-vendor-dec
• Fitness .icon-vendor-fit
• Hotel Room Blocks .icon-vendor-hrb
• Wedding Jewelry .icon-vendor-wjw
• Newlywed Services .icon-vendor-nlw
• Service Staff .icon-vendor-svs
• Shower + Party Venues .icon-vendor-spv
• Technology .icon-vendor-tec
• Vacation Homes + Villas .icon-vendor-vhv
• Variety Acts .icon-vendor-var
• Wedding Designers .icon-vendor-des
• Desserts .icon-vendor-dst
• Wedding Planners .icon-vendor-pln
• Registry Services .icon-vendor-reg
• Bar Services .icon-vendor-bar
• Wedding Photographers .icon-vendor-wph
• Wedding Cakes .icon-vendor-wck
• Rentals .icon-vendor-rnt
• Beauty .icon-vendor-bea
• Reception Venues .icon-vendor-rec
• Officiants + Premarital Counseling .icon-vendor-opc
• Travel Specialists .icon-vendor-trv
• Florists .icon-vendor-flo
• Ensembles + Soloists .icon-vendor-ens
• Alterations + Preservation .icon-vendor-alp
• Menswear .icon-vendor-men
• Ceremony Venues .icon-vendor-cer
• Registry Services .icon-vendor-brg
• Wedding Planners .icon-vendor-wcs
• Bar Services .icon-vendor-bev
• Invitations + Paper Goods .icon-vendor-inv
• Wedding Photographers .icon-vendor-pho
• Wedding Cakes .icon-vendor-cca
• Wedding Bands .icon-vendor-bds
• Fine Jewelry .icon-vendor-jwl
• Videographers .icon-vendor-vid
• Transportation .icon-vendor-tra
• Rentals .icon-vendor-eqr
• Beauty .icon-vendor-hbf
• Unique Wedding Ideas .icon-vendor-ows
• Reception Venues .icon-vendor-rdp
• Officiants + Premarital Counseling .icon-vendor-cof
• Guest Accommodation .icon-vendor-gac
• Travel Specialists .icon-vendor-hat
• Bridal Salons .icon-vendor-bwp
• Florists .icon-vendor-fad
• Favors + Gifts .icon-vendor-fav
• DJs .icon-vendor-djs
• Caterers .icon-vendor-cat
• Photo Booths .icon-vendor-phb
• Calligraphers .icon-vendor-cal
• Ceremony Accessories .icon-vendor-cac
• Ceremony Accessories .icon-vendor-ring-pillow
• House Home .icon-vendor-ynh
• Ice Sculpture .icon-vendor-ice-sculpture
• Lighting .icon-vendor-lit
• Lighting .icon-vendor-lad
• Bachelor Party .icon-vendor-bch
• Alterations + Preservation .icon-vendor-gpr
• Dance Lessons .icon-vendor-dnc
• Hair Stylist .icon-vendor-hair-stylist
• Guestbook .icon-vendor-guestbook
• Menswear .icon-vendor-mfw
• Ceremony Venues .icon-vendor-car
• Shoe .icon-vendor-shoes
• Fashion Jewelry .icon-vendor-hfa
• Ensembles + Soloists .icon-vendor-sol
• Bow .icon-general-bow
• Camera .icon-general-camera
• Lightbulb .icon-general-lightbulb
• Storefront .icon-general-storefront
• Wedding Dress .icon-general-wedding-dress

Social Share Icons

• Twitter .icon-social-twitter
• Pinterest .icon-social-pinterest
• Facebook .icon-social-facebook
• Google+ .icon-social-googleplus
• Instagram .icon-social-instagram
• Email .icon-social-email

Circular Backgrounds for Icons

Currently implemented in the global footer social section.

• .icon-circle-bg .icon-social-twitter
• .icon-circle-bg .icon-social-pinterest
• .icon-circle-bg .icon-social-facebook
• .icon-circle-bg .icon-social-googleplus
• .icon-circle-bg .icon-social-instagram

Cicular Backgrounds for Social Icons (has square class name)

Currently implemented in the social sharing widgets.

• .icon-square-bg .icon-social-twitter
• .icon-square-bg .icon-social-pinterest
• .icon-square-bg .icon-social-facebook
• .icon-square-bg .icon-social-email

Brand Icons

• XO Group .icon-general-xo-logo
• The Nest .icon-general-tn-logo
• The Bump .icon-general-tb-logo
• The Knot .icon-general-tk-logo
• k .icon-general-k-logo

Deprecated Icons

These are icons that will be deprecated from the General Icons category in the coming versions.

• Grid .icon-general-grid
• Single Column .icon-general-single
• Caret Up .icon-general-caret-up
• Caret Down .icon-general-caret-down
• Heart Filled .icon-general-heart-filled
• Star Filled .icon-general-star-filled
• Star .icon-general-star
• Caret Right .icon-general-caret-right
• Caret Left .icon-general-caret-left
• Radio Selected .icon-general-radio-selected
• Checkbox Selected .icon-general-checkbox-selected
• Checkmark .icon-general-selected-state
• Radio Selected .icon-general-radio-selected-state
• Checkmark Selected .icon-general-checkmark-selected-state
• Arrow Angle .icon-general-arrow-angle

Badges

Ribbons

These ribbons represent the different tiers for local vendors. It should always align right with the vendor card.

Gold Ribbon

  <div class="caption-container ribbon gold">
      <div class="box">FEATURED</div>
  </div>

Silver Ribbon

  <div class="caption-container ribbon silver">
      <div class="box">PREFERRED</div>
  </div>

Best of Weddings

• Best of Weddings Small .icon-image-bow icon-image-bow-sm
• Best of Weddings Medium .icon-image-bow icon-image-bow-md
• Best of Weddings Large .icon-image-bow icon-image-bow-lg

<span class="icon icon-image-bow icon-image-bow-sm"> </span>
<span class="icon icon-image-bow icon-image-bow-md"> </span>
<span class="icon icon-image-bow icon-image-bow-lg"> </span>

Star Rating

<span class="star-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">3</span>
  <span class="rating icon icon-general-star-filled"></span>
  <span class="rating icon icon-general-star-filled"></span>
  <span class="rating icon icon-general-star-filled"></span>
  <span class="rating icon icon-general-star"></span>
  <span class="rating icon icon-general-star"></span>
</span>

Note

If you want to override responsiveness, you can specify with classes .star-rating-lg or .star-rating-md, .star-rating-sm
For example:

<span class="star-rating star-rating-sm" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">1</span>
  <span class="rating icon icon-general-star-filled"></span>
</span>

Tags

Static tags

  <span class="tag">tag</span>

Clickable tags

  <span class="tag icon icon-general-close"><span>dresses</span></span>