HomeCore

Icons

Icons are Scalable Vector Graphics available with a set of predefined styles.

Colour

Icons have a default color by default (dark grey) and other variants such as medium grey, light (white) and blue (refinitiv primary colour).

Some icons can have an accent/highlight colour (see table below).

Size

Icons can be resized using the font-size CSS property.

Simply apply a font-size the <i> tag itself or to its parent, and the icons will inherit the font-size value and resize accordingly.

Icons

Dark
(default)
Dark
(duotone)
Medium
Light
Light
(duotone)
Primary
Activity Log
Add
Alert
Arrow Left
Arrow Right
Attachment
Billing
Brochures
Bullet
Buoy
Calendar
Call
Caret Up
Caret Down
Change
Chat
Clear Outline
Clipboard
Close
Dashboard
Document
Download
Ellipsis Vertical
Exchange
Exclamation
Expand
External
Eye
Faq
Filter
Full Screen
Globe
Hourglass
License
Lock
Lookup
Menu
Orders
Personalisation
Pause
Play
Policies
Pound
Preferences
Products
Profile
Question
Reports
Request
Results
Search
Sign Out
Sort Filter
Tag
Technical Guides
Tick
Time
Training
Trash
Upload
User
User List
Users
Wrench

Doctype Icons

Dark
(default)
Medium
Special
colour
Light
Primary
colour
Txt
Doc
Img
Pdf
Ppt
Xls
Zip

Expressive Icons

Dark
Dark
(duotone)
Light
Light
(duotone)
Primary
Trust
Partnership
Innovation
Performance

Illustrative Icons

Dark
Medium
Light
Primary
External
Lookup
Personalisation
Request
Tick

Social Media Icons

Dark
(default)
Dark
(duotone)
Medium
Light
Light
(duotone)
Primary
Facebook
Linkedin
Twitter
Mail

Logo

Dark
Dark
(duotone)
Medium
Light
Light
(duotone)
Primary
Logo

Examples

<!-- Default (dark) -->
<i class="ui-icon ui-icon--dashboard"></i>

<!-- Dark with duotone -->
<i class="ui-icon ui-icon--dashboard ui-icon--duotone"></i>

<!-- Medium (light grey) -->
<i class="ui-icon ui-icon--dashboard ui-icon--medium"></i>

<!-- Light (white) -->
<i class="ui-icon ui-icon--dashboard ui-icon--light"></i>

<!-- Light with duotone -->
<i class="ui-icon ui-icon--dashboard ui-icon--light ui-icon--duotone"></i>

<!-- Primary colour -->
<i class="ui-icon ui-icon--dashboard ui-icon--primary"></i>

<!-- Icon size - 50px -->
<p style="font-size: 50px">
  <i class="ui-icon ui-icon--dashboard"></i>
</p>
Refinitiv © 2020