-
Notifications
You must be signed in to change notification settings - Fork 32
Icons
Ryan Dee edited this page Dec 2, 2024
·
2 revisions
Use utilities for height, width and color to adjust as necessary.
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>Facebook</title>
<path d="M48 24.1c0-13.3-10.7-24-24-24S0 10.9 0 24.1c0 12 8.8 21.9 20.2 23.7V31.1h-6.1v-6.9h6.1v-5.3c0-6 3.6-9.3 9.1-9.3 2.6 0 5.4.5 5.4.5V16h-3c-3 0-3.9 1.9-3.9 3.7v4.5h6.7l-1.1 6.9h-5.6v16.8C39.2 46.1 48 36.1 48 24.1z"></path>
</svg>
</div>
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>Instagram</title>
<path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
</svg>
</div>
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>LinkedIn</title>
<path d="M44.45 0H3.54A3.5 3.5 0 0 0 0 3.46v41.08A3.5 3.5 0 0 0 3.54 48h40.91A3.51 3.51 0 0 0 48 44.54V3.46A3.51 3.51 0 0 0 44.45 0zM14.24 40.9H7.11V18h7.13zm-3.56-26a4.13 4.13 0 1 1 4.13-4.13 4.13 4.13 0 0 1-4.13 4.1zm30.23 26h-7.12V29.76c0-2.66 0-6.07-3.7-6.07s-4.27 2.9-4.27 5.88V40.9h-7.11V18h6.82v3.13h.1a7.48 7.48 0 0 1 6.74-3.7c7.21 0 8.54 4.74 8.54 10.91z"></path>
</svg>
</div>
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>Pinterest</title>
<path d="M24 0a24 24 0 0 0-8.75 46.35 23 23 0 0 1 .08-6.88l2.81-11.93a8.66 8.66 0 0 1-.71-3.54c0-3.34 1.93-5.83 4.34-5.83 2 0 3 1.54 3 3.38 0 2.06-1.31 5.14-2 8a3.48 3.48 0 0 0 3.55 4.34c4.27 0 7.54-4.5 7.54-11 0-5.75-4.13-9.76-10-9.76a10.39 10.39 0 0 0-10.8 10.38A9.34 9.34 0 0 0 14.85 29a.72.72 0 0 1 .17.69c-.18.76-.59 2.39-.67 2.72s-.35.53-.8.32c-3-1.4-4.87-5.78-4.87-9.3 0-7.57 5.5-14.52 15.86-14.52 8.33 0 14.8 5.93 14.8 13.86 0 8.27-5.22 14.93-12.45 14.93-2.43 0-4.72-1.26-5.5-2.76l-1.5 5.71a26.83 26.83 0 0 1-3 6.29A24 24 0 1 0 24 0z"></path>
</svg>
</div>
Snapchat
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>Snapchat</title>
<path d="M24.46 1.44h-.95A12.77 12.77 0 0 0 11.66 9.1c-1.06 2.39-.81 6.44-.6 9.7 0 .38 0 .78.07 1.17a1.91 1.91 0 0 1-.93.2 5.36 5.36 0 0 1-2.2-.58 1.78 1.78 0 0 0-.76-.16A2.38 2.38 0 0 0 4.89 21c-.13.69.18 1.7 2.4 2.58.2.08.44.16.7.24.92.29 2.31.73 2.68 1.62a2.13 2.13 0 0 1-.23 1.76c-.12.28-3.06 7-9.58 8.06a1 1 0 0 0-.83 1 1.34 1.34 0 0 0 .11.45c.49 1.14 2.56 2 6.32 2.57a4.67 4.67 0 0 1 .34 1.14c.08.36.16.73.28 1.13a1.11 1.11 0 0 0 1.16.85 6.05 6.05 0 0 0 1.08-.15 12.67 12.67 0 0 1 2.56-.29 11.27 11.27 0 0 1 1.83.15 8.7 8.7 0 0 1 3.4 1.89c1.71 1.21 3.65 2.58 6.59 2.58h.59c2.94 0 4.88-1.37 6.59-2.58a8.7 8.7 0 0 1 3.44-1.78 11.25 11.25 0 0 1 1.83-.15 12.75 12.75 0 0 1 2.56.27 6 6 0 0 0 1.08.13h.05a1.08 1.08 0 0 0 1.16-.85c.11-.38.19-.75.27-1.11a4.64 4.64 0 0 1 .34-1.13c3.76-.58 5.83-1.42 6.31-2.56a1.32 1.32 0 0 0 .11-.45 1 1 0 0 0-.83-1c-6.53-1.08-9.46-7.77-9.58-8.06a2.13 2.13 0 0 1-.23-1.76c.38-.89 1.76-1.33 2.68-1.62.26-.08.5-.16.7-.24 1.63-.64 2.44-1.43 2.43-2.35a2 2 0 0 0-1.46-1.68 2.67 2.67 0 0 0-1-.19 2.21 2.21 0 0 0-.92.19 5.6 5.6 0 0 1-2.07.59 1.84 1.84 0 0 1-.81-.2c0-.33 0-.67.06-1v-.14c.21-3.26.46-7.32-.6-9.71a12.79 12.79 0 0 0-11.94-7.76z"></path>
</svg>
</div>
Spotify
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>Spotify</title>
<path d="M24 0a24 24 0 1 0 24 24A24 24 0 0 0 24 0zm11 34.61a1.5 1.5 0 0 1-2.06.5c-5.63-3.44-12.73-4.22-21.08-2.31a1.5 1.5 0 0 1-.67-2.92c9.14-2.09 17-1.19 23.31 2.68a1.5 1.5 0 0 1 .5 2.05zm2.94-6.54a1.87 1.87 0 0 1-2.57.62c-6.45-4-16.28-5.11-23.92-2.8a1.87 1.87 0 1 1-1.09-3.58c8.72-2.64 19.55-1.36 27 3.19a1.87 1.87 0 0 1 .62 2.57zm.25-6.8c-7.74-4.59-20.5-5-27.88-2.78A2.24 2.24 0 1 1 9 14.2c8.48-2.57 22.57-2.08 31.48 3.21a2.24 2.24 0 1 1-2.29 3.86z"></path>
</svg>
</div>
TikTok
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 16 17">
<title>TikTok</title>
<path d="M14.315 4.971A4.04 4.04 0 0110.269.965H7.655v7.138l-.003 3.91a2.364 2.364 0 01-2.502 2.36 2.355 2.355 0 01-1.082-.332 2.365 2.365 0 01-1.156-1.992 2.367 2.367 0 013.115-2.28V7.117a5.14 5.14 0 00-.753-.055A5.01 5.01 0 001.51 8.745a4.9 4.9 0 00-1.237 2.957 4.894 4.894 0 001.458 3.813 5.012 5.012 0 003.543 1.45c.254 0 .506-.019.753-.056a4.993 4.993 0 002.79-1.395 4.89 4.89 0 001.467-3.48l-.014-5.84a6.608 6.608 0 004.05 1.377v-2.6h-.006z"></path>
</svg>
</div>
X (formerly Twitter)
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>X</title>
<path d="M28.5 20.3 46 0h-4.1L26.6 17.6 14.5 0H.5l18.3 26.7L.5 48h4.1l16-18.6L33.5 48h14l-19-27.7zm-5.7 6.6-1.9-2.7L6.2 3.1h6.4l11.9 17.1 1.9 2.7L41.8 45h-6.4L22.8 26.9z"></path>
</svg>
</div>
YouTube
<div class="dcf-h-6 dcf-w-6 unl-gray">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<title>YouTube</title>
<path d="M47 12.37a6 6 0 0 0-4.25-4.27C39 7.09 24 7.09 24 7.09s-15 0-18.75 1A6 6 0 0 0 1 12.37C0 16.14 0 24 0 24s0 7.86 1 11.63a6 6 0 0 0 4.25 4.27c3.74 1 18.75 1 18.75 1s15 0 18.75-1A6 6 0 0 0 47 35.63C48 31.86 48 24 48 24s0-7.86-1-11.63zM19.09 31.14V16.86L31.64 24z"></path>
</svg>
</div>
Use utilities for height and width to adjust as necessary.
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.facebook.com/UNLincoln" aria-label="Facebook">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M48 24.1c0-13.3-10.7-24-24-24S0 10.9 0 24.1c0 12 8.8 21.9 20.2 23.7V31.1h-6.1v-6.9h6.1v-5.3c0-6 3.6-9.3 9.1-9.3 2.6 0 5.4.5 5.4.5V16h-3c-3 0-3.9 1.9-3.9 3.7v4.5h6.7l-1.1 6.9h-5.6v16.8C39.2 46.1 48 36.1 48 24.1z"></path>
</svg>
</a>
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.instagram.com/unlincoln/" aria-label="Instagram">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
</svg>
</a>
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.linkedin.com/edu/school?id=18836" aria-label="LinkedIn">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M44.45 0H3.54A3.5 3.5 0 0 0 0 3.46v41.08A3.5 3.5 0 0 0 3.54 48h40.91A3.51 3.51 0 0 0 48 44.54V3.46A3.51 3.51 0 0 0 44.45 0zM14.24 40.9H7.11V18h7.13zm-3.56-26a4.13 4.13 0 1 1 4.13-4.13 4.13 4.13 0 0 1-4.13 4.1zm30.23 26h-7.12V29.76c0-2.66 0-6.07-3.7-6.07s-4.27 2.9-4.27 5.88V40.9h-7.11V18h6.82v3.13h.1a7.48 7.48 0 0 1 6.74-3.7c7.21 0 8.54 4.74 8.54 10.91z"></path>
</svg>
</a>
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.pinterest.com/unlincoln/boards/" aria-label="Pinterest">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M24 0a24 24 0 0 0-8.75 46.35 23 23 0 0 1 .08-6.88l2.81-11.93a8.66 8.66 0 0 1-.71-3.54c0-3.34 1.93-5.83 4.34-5.83 2 0 3 1.54 3 3.38 0 2.06-1.31 5.14-2 8a3.48 3.48 0 0 0 3.55 4.34c4.27 0 7.54-4.5 7.54-11 0-5.75-4.13-9.76-10-9.76a10.39 10.39 0 0 0-10.8 10.38A9.34 9.34 0 0 0 14.85 29a.72.72 0 0 1 .17.69c-.18.76-.59 2.39-.67 2.72s-.35.53-.8.32c-3-1.4-4.87-5.78-4.87-9.3 0-7.57 5.5-14.52 15.86-14.52 8.33 0 14.8 5.93 14.8 13.86 0 8.27-5.22 14.93-12.45 14.93-2.43 0-4.72-1.26-5.5-2.76l-1.5 5.71a26.83 26.83 0 0 1-3 6.29A24 24 0 1 0 24 0z"></path>
</svg>
</a>
Snapchat
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="snapchat://?u=unlincoln" aria-label="Snapchat">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M24.46 1.44h-.95A12.77 12.77 0 0 0 11.66 9.1c-1.06 2.39-.81 6.44-.6 9.7 0 .38 0 .78.07 1.17a1.91 1.91 0 0 1-.93.2 5.36 5.36 0 0 1-2.2-.58 1.78 1.78 0 0 0-.76-.16A2.38 2.38 0 0 0 4.89 21c-.13.69.18 1.7 2.4 2.58.2.08.44.16.7.24.92.29 2.31.73 2.68 1.62a2.13 2.13 0 0 1-.23 1.76c-.12.28-3.06 7-9.58 8.06a1 1 0 0 0-.83 1 1.34 1.34 0 0 0 .11.45c.49 1.14 2.56 2 6.32 2.57a4.67 4.67 0 0 1 .34 1.14c.08.36.16.73.28 1.13a1.11 1.11 0 0 0 1.16.85 6.05 6.05 0 0 0 1.08-.15 12.67 12.67 0 0 1 2.56-.29 11.27 11.27 0 0 1 1.83.15 8.7 8.7 0 0 1 3.4 1.89c1.71 1.21 3.65 2.58 6.59 2.58h.59c2.94 0 4.88-1.37 6.59-2.58a8.7 8.7 0 0 1 3.44-1.78 11.25 11.25 0 0 1 1.83-.15 12.75 12.75 0 0 1 2.56.27 6 6 0 0 0 1.08.13h.05a1.08 1.08 0 0 0 1.16-.85c.11-.38.19-.75.27-1.11a4.64 4.64 0 0 1 .34-1.13c3.76-.58 5.83-1.42 6.31-2.56a1.32 1.32 0 0 0 .11-.45 1 1 0 0 0-.83-1c-6.53-1.08-9.46-7.77-9.58-8.06a2.13 2.13 0 0 1-.23-1.76c.38-.89 1.76-1.33 2.68-1.62.26-.08.5-.16.7-.24 1.63-.64 2.44-1.43 2.43-2.35a2 2 0 0 0-1.46-1.68 2.67 2.67 0 0 0-1-.19 2.21 2.21 0 0 0-.92.19 5.6 5.6 0 0 1-2.07.59 1.84 1.84 0 0 1-.81-.2c0-.33 0-.67.06-1v-.14c.21-3.26.46-7.32-.6-9.71a12.79 12.79 0 0 0-11.94-7.76z"></path>
</svg>
</a>
Spotify
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://go.unl.edu/spotify" aria-label="Spotify">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M24 0a24 24 0 1 0 24 24A24 24 0 0 0 24 0zm11 34.61a1.5 1.5 0 0 1-2.06.5c-5.63-3.44-12.73-4.22-21.08-2.31a1.5 1.5 0 0 1-.67-2.92c9.14-2.09 17-1.19 23.31 2.68a1.5 1.5 0 0 1 .5 2.05zm2.94-6.54a1.87 1.87 0 0 1-2.57.62c-6.45-4-16.28-5.11-23.92-2.8a1.87 1.87 0 1 1-1.09-3.58c8.72-2.64 19.55-1.36 27 3.19a1.87 1.87 0 0 1 .62 2.57zm.25-6.8c-7.74-4.59-20.5-5-27.88-2.78A2.24 2.24 0 1 1 9 14.2c8.48-2.57 22.57-2.08 31.48 3.21a2.24 2.24 0 1 1-2.29 3.86z"></path>
</svg>
</a>
TikTok
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="#" aria-label="TikTok">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 16 17">
<path d="M14.315 4.971A4.04 4.04 0 0110.269.965H7.655v7.138l-.003 3.91a2.364 2.364 0 01-2.502 2.36 2.355 2.355 0 01-1.082-.332 2.365 2.365 0 01-1.156-1.992 2.367 2.367 0 013.115-2.28V7.117a5.14 5.14 0 00-.753-.055A5.01 5.01 0 001.51 8.745a4.9 4.9 0 00-1.237 2.957 4.894 4.894 0 001.458 3.813 5.012 5.012 0 003.543 1.45c.254 0 .506-.019.753-.056a4.993 4.993 0 002.79-1.395 4.89 4.89 0 001.467-3.48l-.014-5.84a6.608 6.608 0 004.05 1.377v-2.6h-.006z"></path>
</svg>
</a>
X (formerly Twitter)
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://twitter.com/UNLincoln" aria-label="X">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M28.5 20.3 46 0h-4.1L26.6 17.6 14.5 0H.5l18.3 26.7L.5 48h4.1l16-18.6L33.5 48h14l-19-27.7zm-5.7 6.6-1.9-2.7L6.2 3.1h6.4l11.9 17.1 1.9 2.7L41.8 45h-6.4L22.8 26.9z"></path>
</svg>
</a>
YouTube
<a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://twitter.com/UNLincoln" aria-label="YouTube">
<svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
<path d="M47 12.37a6 6 0 0 0-4.25-4.27C39 7.09 24 7.09 24 7.09s-15 0-18.75 1A6 6 0 0 0 1 12.37C0 16.14 0 24 0 24s0 7.86 1 11.63a6 6 0 0 0 4.25 4.27c3.74 1 18.75 1 18.75 1s15 0 18.75-1A6 6 0 0 0 47 35.63C48 31.86 48 24 48 24s0-7.86-1-11.63zM19.09 31.14V16.86L31.64 24z"></path>
</svg>
</a>
If an anchor link goes to an external site and does not contain an image or SVG as a child, an icon will be appended to the link to indicate external content to users.