A List of Icons To Use in MSIT Web Pages

This is a list of icons you can use on MSIT/UXS web pages.

They are grouped below as follows:

• Top 7 List
• Alert and Notification Icons
• File Download Icons
• Computer Icons

These are the Top 7 most likely icons to be used on the MSIT/UXS web space, based on experience. They are placed at the top of the page for convenience, to speed access for the author/editor. The complete list of icons will be found in the sections following this list.

Note that many of these icons are strictly optional. All of them are intended to aid the reader in identifying key information about the content or resources they are looking for. They should be used when necessary, but otherwise they should be used sparingly.

Alerts and Notification Icons

Use Alert and Notification icons to draw the reader’s attention to something.

Asterisk Icon : : Tips, Information Worth Noting, Advice

The Asterisk icon is used to give the reader a useful tip, or information that might be worth remembering for some reason. It can be used when the information being conveyed isn’t important enough to warrant a Warning Triangle Alert, but is still worth knowing. It begins a paragraph, like so:

Praesent et augue eget ex tempor sollicitudin. Nam eu erat quis mi rutrum viverra eu eu diam. 

Ban Icon : : Prohibited Item or Action

The Ban icon is used to inform the reader about something that is prohibited or not allowed. It begins a paragraph, like so:

Vivamus ut semper mauris. Nunc porttitor consequat eros. 

Building Icon : : Building Address

The Building icon is an optional icon used to give the reader a physical address for something, as opposed to a Shipping Address. It begins a paragraph, like so:

6431 Fannin St, Houston, TX 77030 – Room MSB 8.101

See Also: Envelope, Location, Shipping Address.

Check Icon : : Checklist or Prerequisite List

The Check icon is an optional icon used to advise the reader about a checklist or list of prerequisites regarding a topic. It begins a paragraph, like so:

Morbi feugiat risus et nulla pretium, nec porta enim pellentesque. Sed egestas tellus in dui laoreet ullamcorper. Duis faucibus sem non pretium aliquet.1

See Also: Envelope, Location, Shipping Address.

Clock Icon : : Business Hours

The Clock icon is used to advise the reader about the days and times a given office or function is expected to be open or available. It can begin a paragraph, like so:

8:00 AM to 4:30 PM Mon-Fri 

Alternatively, it can precede a notification of hours or days of operation within a paragraph, like so:

Cras placerat purus sodales odio laoreet aliquet. Vestibulum lobortis massa 8:00 AM to 4:30 PM Mon-Fri vitae dictum sagittis. In cursus turpis ac neque finibus lobortis.

Email Address Icon : : Email Address (when hidden)

The Email Circle icon is used to mark an email address, when the email address is hidden behind a link.

It immediately follows a link to an email address, like so:

Etiam enim massa, iaculis vitae lacinia a blandit eu lorem vitae.

Note that if the email address is explicitly spelled out, an Email icon is not required, since it is obvious the link is an email address:

Etiam enim massa, iaculis vitae lacinia a [email protected].

Envelope Icon : : Mailing Address

The Envelope icon is an optional icon that identifies a mailing address, as opposed to a physical street address. It can placed at the beginning of the paragraph, like so:

PO Box 987654, Houston, TX 77001

External Link Icon : : Links Going Outside uth.edu domain

The External Link icon is used to mark a link to a website or page that is located outside the uth.tmc.edu or uth.edu domains. It immediately follows a link to external website or page, like so:

Fusce scelerisque, orci vitae tincidunt efficitur, metus dolor sodales magna, eget convallis nisi lectus nec nulla. 

Info Circle Icon : : More Information, Point of Information

The Info Circle icon identifies further information. It can be used to either point the user to a page with more detailed information about something, or it can be used to give a summary of information in a couple of sentences. It is placed at the beginning of the paragraph, like so:

Maecenas sagittis sed velit eget pellentesque. Pellentesque ac blandit orci, ac feugiat quam.

Lightbulb Icon : : Idea or Suggestion

The Lightbulb icon is an optional icon designed to identify an idea or suggestion for the reader. It is placed at the beginning of the paragraph, like so:

Vestibulum in tellus diam. Donec vel sapien non erat varius cursus. Suspendisse pharetra urna lobortis massa efficitur imperdiet.

Location Icon : : Address or Physical Location

The Location icon identifies a street address or physical location. It immediately precedes the address or location, as shown in 2 examples below (1st example shows how to display the address as its own paragraph; 2nd example shows how it might look in a normal paragraph):

6431 Fannin Street, Houston, Texas 77030

Morbi in libero sodales, ut diam MSB 8.101 ut quam orci, mattis aliquam urna sed, ullamcorper feugiat tellus.

Lock Icon : : Page Requiring Credentials, or Secured Internal Pages

The Lock icon is used to indicate a link or item on a page that connects to a secured web page or form, either requiring credentials to sign in, or requiring the user to be inside the University’s firewall. It immediately follows the link, as shown in 2 examples below (2nd example shows how it might look in a “See Also” paragraph):

In interdum leo nec pretium viverra. Duis non odio ut libero malesuada aliquam.

Phasellus sit amet varius justo

Phone Icon : : Telephone Number (optional)

The Phone icon is used to mark the presence of a telephone number that might be of interest to the user. It is an optional icon – it is not required. Use the icon when you want to draw the reader’s attention to a phone number that might be useful for them to use.

It can be used to begin a paragraph, like so:

Aliquam Suscipit: 713-500-0000

It can also be used within a paragraph, to highlight the phone number for the reader. If so, the icon should be placed immediately before a telephone number, like so:

Morbi sollicitudin urna ut lacus sodales condimentum. Sed non 713-500-0000 risus auctor risus aliquet gravida.

Question Circle Icon : : For More Information

The Question Circle icon is used to tell the reader where to go to get more information about something, such as who to contact or where to physically go to resolve an issue. It begins a paragraph, like so:

Pellentesque sodales turpis et egestas gravida. Donec rutrum porttitor risus, sed finibus neque blandit eu 713-500-0000. 

See Also Icon : : Links Going Other Relevant Pages

The See Also link icon is used to mark a link to a website or page that might be helpful or relevant to the reader, in addition to the content on the current page. It can be placed at the top of a page, at the bottom of a page, or as a paragraph of its own following some specific relevant content. When placed, it begins a paragraph, like so (2nd example shows how to also include an external link icon):

Proin aliquam est augue

Nam dapibus porta ullamcorper

Shipping Address Icon : : Shipping Address

The Shipping icon is an optional icon used to identify a shipping address. It can begin a paragraph, like so:

6431 Fannin St, Houston, TX 77030 – MSB 8.101

Stopwatch Icon : : Time Sensitive Information

The Stopwatch icon is used to inform the reader that certain information is time sensitive, requiring them to provide a response or action within a specific time frame. It can begin a paragraph, like so:

Sed finibus turpis 1 hour posuere molestie hendrerit. Sed quam nibh, fermentum eu maximus blandit, tempus quis libero.

It can also be used in a paragraph by having it precede a time frame within that paragraph, like so:

Curabitur sagittis id dui et molestie. Donec et consectetur lectus 3 days antes gravida. Ut accumsan tellus sed elit dictum pretium. Donec id cursus dolor.

User Circle Icon : : Identifies a Person (optional)

The User Circle icon is an optional icon used to convey information about a specific person. It begins a paragraph, like so:

John Q. Public – MSB 8.102 – 713-500-0000

User Group Icon : : Identifies a Group of People (optional)

The User Group icon is an optional icon used to convey information about a group of people. The group can be a Department, a Lab group, etc. It begins a paragraph, like so:

Department of Proctology – MSB 8.201 – 713-500-0000

Warning Triangle Icon : : Warning, Danger, Pay Attention

The Warning icon is used to convey information that is critical for the reader to be aware of. It begins a paragraph, like so:

Lorem ipsum dolor sit amet! Consectetur adipiscing elit. Nullam ultricies gravida felis. In tristique diam augue. Maecenas blandit odio eget tortor auctor, vitae lobortis risus feugiat.

Wifi Icon : : Availability of Wifi

The Wifi icon is an optional icon, used to indicate to the reader that wifi is either available or required in some way. It can be displayed at the beginning of a paragraph, like so:

Pellentesque ut volutpat sapien, ut sollicitudin neque. Nullam sagittis, augue in efficitur vehicula, magna lacus mollis erat, vel blandit est lacus sit amet nibh.

Wrench Icon : : Troubleshooting, Repair

The Wrench icon is used to point the reader either to a troubleshooting page, or to give brief information about a workaround or fix for some problem. It is displayed at the beginning of a paragraph, like so:

Duis tincidunt consectetur

Pellentesque ut volutpat sapien, ut sollicitudin neque. Nullam sagittis, augue in efficitur vehicula, magna lacus mollis erat, vel blandit est lacus sit amet nibh.

File Download Icons

These icons are to be used whenever you are linking to files to be downloaded.

File download links, particularly document links such as PDF, Excel, and Word documents, should be set to open new tabs whenever possible, so the user does not lose the page they are currently on.

File Icon – Archive (including Zip Files)

Archive files, including ZIP files, are marked with this icon. It is placed immediately after the link, like so:

This is a link to an archive file

File Icon – Audio

Audio files are marked with this icon. It is placed immediately after the link, like so:

This is a link to an audio file

File Icon – Excel Documents

Microsoft Excel documents are marked with this icon. It is placed immediately after the link, like so:

This is a link to a Microsoft Excel file

File Icon – Generic

This icon is for files in general, especially for file types not otherwise covered elsewhere in this section. It is placed immediately after the link, like so:

This is a link to a generic file like an installer

File Icon – Installer Downloads

Installer downloads are marked with this icon. It is placed immediately after the link, like so:

This is a link to a Installer file

File Icon – PDF

PDF files are marked with this icon. It is placed immediately after the link, like so:

This is a link to a PDF file

File Icon – Powerpoint Documents

Microsoft Powerpoint files are marked with this icon. It is placed immediately after the link, like so:

This is a link to a Powerpoint file

File Icon – Video Files

Video files are marked with this icon. It is placed immediately after the link, like so:

This is a link to a video file

File Icon – Word Documents

Microsoft Word documents are marked with this icon. It is placed immediately after the link, like so:

This is a link to a Microsoft Word file

Computer Icons

These icons can be used to identify certain computer and computer hardware types.

Computer Icon – Database or Storage

This icon can be used to identify a database on a page. It can be placed immediately before (or after) the relevant text, like so:

Databases

Computer Icon – Desktop

This icon can be used to identify a desktop computer on a page. It can be placed immediately before (or after) the relevant text, like so:

Desktop Computers

Computer Icon – Hard Drive

This icon can be used to identify a hard drive (such as a portable hard drive) on a page. It can be placed immediately before (or after) the relevant text, like so:

Encrypted Portable Hard Drives

Computer Icon – Laptop

This icon can be used to identify a laptop computer on a page. It can be placed immediately before (or after) the relevant text, like so:

Laptop Computers

Computer Icon – Mobile Device

This icon can be used to identify a cell phone or mobile device on a page. It can be placed immediately before (or after) the relevant text, like so:

Mobile Devices

Computer Icon – Server

This icon can be used to identify a server on a page. It can be placed immediately before (or after) the relevant text, like so:

Servers and Storage Products

Computer Icon – Tablets

This icon can be used to identify a tablet on a page. It can be placed immediately before (or after) the relevant text, like so:

iPads and Other Tablets

Computer Icon – TV or Monitor

This icon can be used to identify a TV or computer monitor on a page. It can be placed immediately before (or after) the relevant text, like so:

Monitors and TV Systems