Skip to main content
Texas Design System

← Back to Design Tokens

Icons

Interface Icons — 24×24

Navigation

chevron-left
chevron-right
chevron-down
chevron-up
chevron-first
chevron-last
chevrons-up-down
arrow-left
arrow-right
circle-arrow-left
circle-arrow-right
View HTML 
<div class="txds-icon-grid">
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-left</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-right</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-down</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
    <span class="txds-icon-cell__label">chevron-up</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
    <span class="txds-icon-cell__label">chevron-first</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
    <span class="txds-icon-cell__label">chevron-last</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    <span class="txds-icon-cell__label">chevrons-up-down</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
    <span class="txds-icon-cell__label">arrow-left</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    <span class="txds-icon-cell__label">arrow-right</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m8 12 4-4 4 4"/><path d="M12 16V8"/></svg>
    <span class="txds-icon-cell__label">circle-arrow-left</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/></svg>
    <span class="txds-icon-cell__label">circle-arrow-right</span>
  </div>
</div>

UI Actions

search
bell
calendar
minus
plus
x
menu
megaphone
external-link
file-text
globe
View HTML 
<div class="txds-icon-grid">
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <span class="txds-icon-cell__label">search</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
    <span class="txds-icon-cell__label">bell</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
    <span class="txds-icon-cell__label">calendar</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><line x1="4" x2="20" y1="12" y2="12"/></svg>
    <span class="txds-icon-cell__label">minus</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    <span class="txds-icon-cell__label">plus</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    <span class="txds-icon-cell__label">x</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
    <span class="txds-icon-cell__label">menu</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44"/><path d="m13.56 11.747 4.332-.924"/><path d="m16 21-3.105-6.21"/><path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z"/><path d="m6.158 8.633 1.114 4.456"/></svg>
    <span class="txds-icon-cell__label">megaphone</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
    <span class="txds-icon-cell__label">external-link</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
    <span class="txds-icon-cell__label">file-text</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
    <span class="txds-icon-cell__label">globe</span>
  </div>
</div>

Tools & Objects

wrench
hammer
umbrella
users
settings
download
arrow-down-to-line
newspaper
triangle-alert
circle-x
View HTML 
<div class="txds-icon-grid">
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
    <span class="txds-icon-cell__label">wrench</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9"/><path d="M17.64 15 22 10.64"/><path d="m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91"/></svg>
    <span class="txds-icon-cell__label">hammer</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M22 12a10.06 10.06 0 0 0-20 0Z"/><path d="M12 12v8a2 2 0 0 0 4 0"/><path d="M12 2v1"/></svg>
    <span class="txds-icon-cell__label">umbrella</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    <span class="txds-icon-cell__label">users</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
    <span class="txds-icon-cell__label">settings</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
    <span class="txds-icon-cell__label">download</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>
    <span class="txds-icon-cell__label">arrow-down-to-line</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1"/><path d="M15 13h6"/><path d="M18 10v6"/></svg>
    <span class="txds-icon-cell__label">newspaper</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8.5 7 7"/></svg>
    <span class="txds-icon-cell__label">triangle-alert</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--24">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <span class="txds-icon-cell__label">circle-x</span>
  </div>
</div>

Interface Icons — 16×16

bell
calendar
chevron-down
chevron-left
chevron-right
chevron-up
chevron-first
chevron-last
chevrons-up-down
search
minus
plus
triangle-alert
menu
x
file-text
View HTML 
<div class="txds-icon-grid">
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
    <span class="txds-icon-cell__label">bell</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
    <span class="txds-icon-cell__label">calendar</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-down</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-left</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
    <span class="txds-icon-cell__label">chevron-right</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
    <span class="txds-icon-cell__label">chevron-up</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
    <span class="txds-icon-cell__label">chevron-first</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
    <span class="txds-icon-cell__label">chevron-last</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    <span class="txds-icon-cell__label">chevrons-up-down</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <span class="txds-icon-cell__label">search</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><line x1="4" x2="20" y1="12" y2="12"/></svg>
    <span class="txds-icon-cell__label">minus</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    <span class="txds-icon-cell__label">plus</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8.5 7 7"/></svg>
    <span class="txds-icon-cell__label">triangle-alert</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
    <span class="txds-icon-cell__label">menu</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    <span class="txds-icon-cell__label">x</span>
  </div>
  <div class="txds-icon-cell txds-icon-cell--16">
    <svg viewBox="0 0 24 24"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
    <span class="txds-icon-cell__label">file-text</span>
  </div>
</div>

Social Icons

View HTML 
<div class="txds-social-icons">
  <a href="#" class="txds-social-icon txds-social-icon--youtube" aria-label="YouTube" title="YouTube">
    <i class="bi bi-youtube" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--facebook" aria-label="Facebook" title="Facebook">
    <i class="bi bi-facebook" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--linkedin" aria-label="LinkedIn" title="LinkedIn">
    <i class="bi bi-linkedin" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--instagram" aria-label="Instagram" title="Instagram">
    <i class="bi bi-instagram" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--flickr" aria-label="Flickr" title="Flickr">
    <i class="bi bi-flickr" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--wordpress" aria-label="WordPress" title="WordPress">
    <i class="bi bi-wordpress" aria-hidden="true"></i>
  </a>
  <a href="#" class="txds-social-icon txds-social-icon--x" aria-label="X (Twitter)" title="X (Twitter)">
    <i class="bi bi-twitter-x" aria-hidden="true"></i>
  </a>
</div>

Documentation Sidebar

Iconography

Purpose:

Icon libraries can influence the overall look and feel of your website. When using icons they must be accompanied by a text label. There are many high quality free libraries to choose from, so consider all options before paying for a paid service or using custom icons.

Each library has its own style and characteristics, so choose a library that fits your style and icon needs.

Using one library for all icons is suggested for consistency.

Free libraries:

🔗 Material Symbols (Google)
🔗 Lucide (Feather)
🔗 Ionicons
🔗 Bootstrap

View HTML 
<div class="txds-icon-docs" style="max-width: 400px">
  <h2 class="txds-icon-docs__title">Iconography</h2>
  <div class="txds-icon-docs__content">
    <div>
      <p class="txds-icon-docs__label">Purpose:</p>
      <p class="txds-icon-docs__text">
        Icon libraries can influence the overall look and feel of your website. When using icons they must be accompanied by a text label. There are many high quality free libraries to choose from, so consider all options before paying for a paid service or using custom icons.
      </p>
      <p class="txds-icon-docs__text">
        Each library has its own style and characteristics, so choose a library that fits your style and icon needs.
      </p>
      <p class="txds-icon-docs__text">
        Using one library for all icons is suggested for consistency.
      </p>
    </div>
    <div>
      <p class="txds-icon-docs__label">Free libraries:</p>
      <p class="txds-icon-docs__links">
        &#128279; <a href="https://fonts.google.com/icons">Material Symbols</a> (Google)<br>
        &#128279; <a href="https://lucide.dev/">Lucide (Feather)</a><br>
        &#128279; <a href="https://ionic.io/ionicons">Ionicons</a><br>
        &#128279; <a href="https://icons.getbootstrap.com/">Bootstrap</a>
      </p>
    </div>
  </div>
</div>