Graphic Elements


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 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



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>

Silver Ribbon

  <div class="caption-container ribbon silver">
      <div class="box">PREFERRED</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="">
  <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>


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="">
  <span itemprop="ratingValue">1</span>
  <span class="rating icon icon-general-star-filled"></span>


Static tags

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

Clickable tags

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