Volue logo
Volue logomark
Wave Core
Show Hide
    v1.14.1 • 16-10-2024
    Jump to section

    Icon reference

    Click on the symbol next to the icon name to show SVG code that you can copy to your markup or to download SVG file.

    activity activity
    activity
    add add
    add
    adjust adjust
    adjust
    alignCenter alignCenter
    alignCenter
    alignJustify alignJustify
    alignJustify
    alignLeft alignLeft
    alignLeft
    alignRight alignRight
    alignRight
    archive archive
    archive
    area area
    area
    arrowDown arrowDown
    arrowDown
    arrowLeft arrowLeft
    arrowLeft
    arrowRight arrowRight
    arrowRight
    arrowUp arrowUp
    arrowUp
    attachment attachment
    attachment
    barChart1 barChart1
    barChart1
    barChart2 barChart2
    barChart2
    bell bell
    bell
    block block
    block
    bold bold
    bold
    book book
    book
    bookmark bookmark
    bookmark
    box box
    box
    building building
    building
    bundle bundle
    bundle
    calendar calendar
    calendar
    camera camera
    camera
    cases cases
    cases
    chat chat
    chat
    check check
    check
    checkbox checkbox
    checkbox
    chevronDoubleDown chevronDoubleDown
    chevronDoubleDown
    chevronDoubleLeft chevronDoubleLeft
    chevronDoubleLeft
    chevronDoubleRight chevronDoubleRight
    chevronDoubleRight
    chevronDoubleUp chevronDoubleUp
    chevronDoubleUp
    chevronDown chevronDown
    chevronDown
    chevronLeft chevronLeft
    chevronLeft
    chevronRight chevronRight
    chevronRight
    chevronUp chevronUp
    chevronUp
    close close
    close
    cloud cloud
    cloud
    code code
    code
    comment comment
    comment
    compas compas
    compas
    coordinates3d coordinates3d
    coordinates3d
    copy copy
    copy
    cornerDownRight cornerDownRight
    cornerDownRight
    creditCard creditCard
    creditCard
    cursor cursor
    cursor
    database database
    database
    description description
    description
    distance distance
    distance
    dollar dollar
    dollar
    downloadCloud downloadCloud
    downloadCloud
    download download
    download
    dragAndDrop dragAndDrop
    dragAndDrop
    dropdown dropdown
    dropdown
    edit edit
    edit
    equipment equipment
    equipment
    error error
    error
    expand2 expand2
    expand2
    expand expand
    expand
    externalLink externalLink
    externalLink
    fastBack fastBack
    fastBack
    fastForward fastForward
    fastForward
    file file
    file
    film film
    film
    filter filter
    filter
    flag flag
    flag
    folder folder
    folder
    globe2 globe2
    globe2
    globe globe
    globe
    grid grid
    grid
    group group
    group
    heart heart
    heart
    help help
    help
    hide hide
    hide
    history history
    history
    home home
    home
    image image
    image
    inbox inbox
    inbox
    info info
    info
    italic italic
    italic
    layers layers
    layers
    layout layout
    layout
    legend legend
    legend
    link link
    link
    list list
    list
    loading loading
    loading
    locate locate
    locate
    location location
    location
    lock lock
    lock
    longParagraph longParagraph
    longParagraph
    mail mail
    mail
    measure measure
    measure
    menu menu
    menu
    messageAlert messageAlert
    messageAlert
    minimize minimize
    minimize
    minus minus
    minus
    mobile mobile
    mobile
    more more
    more
    move move
    move
    next next
    next
    objects objects
    objects
    pause pause
    pause
    pc pc
    pc
    phone phone
    phone
    pieChart pieChart
    pieChart
    pinBookmark pinBookmark
    pinBookmark
    pin pin
    pin
    play play
    play
    previous previous
    previous
    print print
    print
    qrcode qrcode
    qrcode
    radio radio
    radio
    redo redo
    redo
    reload reload
    reload
    repeat repeat
    repeat
    roles roles
    roles
    rotate rotate
    rotate
    route route
    route
    save save
    save
    scanCode scanCode
    scanCode
    scanQrCode scanQrCode
    scanQrCode
    search search
    search
    send send
    send
    settings settings
    settings
    share share
    share
    shield shield
    shield
    shortParagraph shortParagraph
    shortParagraph
    show show
    show
    signIn signIn
    signIn
    signOut signOut
    signOut
    skills skills
    skills
    skipBack skipBack
    skipBack
    skipForward skipForward
    skipForward
    sortAlphaAsc sortAlphaAsc
    sortAlphaAsc
    sortAlphaDesc sortAlphaDesc
    sortAlphaDesc
    sortAsc sortAsc
    sortAsc
    sortDesc sortDesc
    sortDesc
    sortHorizontal sortHorizontal
    sortHorizontal
    sortVertical sortVertical
    sortVertical
    star star
    star
    streetview streetview
    streetview
    tablet tablet
    tablet
    tasks tasks
    tasks
    themeMap themeMap
    themeMap
    timeAlarm timeAlarm
    timeAlarm
    timeHistory timeHistory
    timeHistory
    time time
    time
    timeseries timeseries
    timeseries
    trash trash
    trash
    trendingDown trendingDown
    trendingDown
    trendingUp trendingUp
    trendingUp
    turbine turbine
    turbine
    type type
    type
    underline underline
    underline
    undo undo
    undo
    unlock unlock
    unlock
    uploadCloud uploadCloud
    uploadCloud
    upload upload
    upload
    user user
    user
    validation validation
    validation
    videoCamera videoCamera
    videoCamera
    warning warning
    warning
    watch watch
    watch
    wifiOff wifiOff
    wifiOff
    wifi wifi
    wifi
    zoomIn zoomIn
    zoomIn
    zoomOut zoomOut
    zoomOut

    Using icons

    Our icon system is based on SVG files. SVGs have a number of advantages:

    • They’re vector graphics that can be infinitely scaled.
    • SVG images can be inlined right in the document and thus styled with CSS or even manipulated with JavaScript.
    • It is possible to create single SVG sprite sheet and reuse shapes without duplication.

    An SVG can be embedded inline in an HTML document using the <svg> tag:

    <!-- somewhere in your markup -->
<!-- `focusable` attribute is set to false to prevent the SVG from receiving focus in IE -->
<div class="svgIcon">
  <svg
    aria-hidden="true"
    focusable="false"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>
  </svg>
</div>

    The markup above can be simplified using .svgIcon--stroked class to avoid repetition of presentational SVG attributes between icons:

    <div class="svgIcon svgIcon--stroked">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>
  </svg>
</div>

    You're probably going to be using multiple icons in your project; while SVG icons are generally lightweight, they can still contain quite a few lines of markup. Fortunately, you can minimize the bloat by using an SVG sprite.

    What does an SVG sprite look like?

    An SVG sprite is a single SVG file that contains data for multiple SVG graphics:

    <!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- define "add" icon -->
  <symbol id="svg--add" viewBox="0 0 24 24">
    <!-- all the paths and shapes and whatnot for this icon -->
    <path d="M12 19V5m-7 7h14"/>
  </symbol>
  <!-- define "camera" icon -->
  <symbol id="svg--camera" viewBox="0 0 24 24">
    <path d="M23 8a2 2 0 00-2-2h-4l-2-3H9L7 6H3a2 2 0 00-2 2v11a2 2 0 002 2h18a2 2 0 002-2M1 8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11a2 2 0 01-2 2H3a2 2 0 01-2-2m11-2a4 4 0 10-4-4m4 4a4 4 0 114-4"/>
  </symbol>
  <!-- more icons… -->
</svg>

    It is just an <svg> tag with a bunch of <symbol> tags. Each <symbol> tag has a unique ID and wraps all the paths and whatnot for each icon. See this article for further explanation.

    Using an SVG sprite

    SVG sprite that comes with all the available icons is distributed together with @volue/wave package. Once installed, the sprite file can be found at node_modules/@volue/wave/dist/core/sprite.svg. It is also included in @volue/design-icons package (see readme) along with other files containing icons data.

    To place an icon code into your page, link to the SVG sprite by targeting the icon’s name in the href attribute of use element:

    <div class="svgIcon svgIcon--stroked">
  <svg aria-hidden="true">
    <use xlink:href="path/to/file/sprite.svg#svg--pieChart"></use>
  </svg>
</div>

    While externally referenced <use> is probably most convenient, it is not supported in IE11 and below. If you need to support these browsers, there are two major workaround choices:

    1. Include the SVG sprite in all the HTML documents themselves.
    2. Ajax for the sprite.

    In the first choice, you need to include your sprite sheet file at the top of <body>. Wrap it in a container with .is-hidden class, so that it doesn't take up any space.

    <!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  <!-- SVG sprite sheet up in the DOM, make sure that the SVG sprite file is included on every page/view you want the icons to appear -->
  <div id="svgSpritePlaceholder" class="is-hidden" aria-hidden="true">
    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
      <symbol id="svg--iconOne" viewBox="0 0 24 24">
        <path d="M6 4h8a4 4 0 110 8H6h9a4 4 0 110 8H6V4z"/>
        </symbol>
      <symbol id="svg--iconTwo" viewBox="0 0 24 24">
        <path d="M20 6L9 17l-5-5"/>
      </symbol>
      <!-- rest of the icons… -->
    </svg>
  </div>
  <h1>SVG is awesome.</h1>
  <!-- reuse the icons at any point -->
  <div class="svgIcon svgIcon--stroked">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#svg--iconOne"></use></svg>
  </div>
</body>
</html>

    With the second choice, you load your spritemap asynchronously over XHR and inject it onto container. This way the browser can cache the spritemap file.

    Wave.utils.loadSvg('path/to/file/sprite.svg', function (err, svg) {
  document.getElementById('svgSpritePlaceholder').appendChild(svg);
});

    If you are using Angular framework, you can inject your spritemap file using ng-include directive. Right after <body> tag place this:

    <div id="svgSpritePlaceholder" class="is-hidden" aria-hidden="true">
  <ng-include src="'path/to/file/sprite.svg'"></ng-include>
</div>

    Once the sprite sheet file is included/loaded you can access all of it's shapes as if they were inline via the <svg> and <use> elements.

    Everytime you want to use an icon you simply write:

    <div class="svgIcon svgIcon--stroked">
  <svg aria-hidden="true" focusable="false"><use xlink:href="#svg--iconName"></use></svg>
</div>

    By default the icon will inherit the text color from the parent element, but you can use the text color helpers to override this behaviour or apply your own styles:

    #svg--inlineStyled {
  stroke: seagreen;
}

    Icon circles

    You can add a circle around icons. Icon circles can be themed using fill helpers:

    Icon circle

    Icon circles with outlines can be themed using text color helpers:

    Icon circle with outline

    Accessibility

    There are two ways an icon might be used:

    1. Decorative: icon is just visual sugar – the words around it convey the meaning
    2. Standalone: icon presented alone that needs to convey meaning all by itself

    Majority of icons are intended to be used as decorative icon. When there is a text label accompanying the icon, the icon itself becomes irrelevant to screen readers and the common practice is to hide it using aria-hidden attribute:

    Info

    Standalone icons without text next to them need additional attributes such as aria-labelledBy pointing to icon's <title> to clarify their meaning. Alternatively you can use hidden assistive text next to the icon to describe it:

    Approved
    Rejected

    Standalone icons used in interactive controls such as buttons don't need any additional attributes as long as you provide an accessible label on the control itself:

    Sprite builder

    If you need to build a custom SVG sprite sheet from individual SVG icons, here's a tool for that.

    Icon font Deprecated

    The Icon font is used by adding an HTML <i> tag with class pf in combination with a pf- icon name added to it <i class="pf pf-info"></i>.

    It is highly recommended to use SVG icons where possible instead of the icon font, because SVGs are more reliable and come with less issues.
    For details, you should read https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/.

    Icon font is no longer extended with new icons - it exists for backwards-compatiblity purposes and eventually it will get removed from the library.

    If you are running IIS 6 or higher on your web server, you need to add the following MIME type declaration in web.config in order to properly serve Icon Font:

    <system.webServer>
  …
  <staticContent>
    <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>
    Sign out
    Announcement

    This is the technical documentation of Wave Core library, the foundational part of Wave Design System.

    Currently we are working on brand new design system site and a set of polished React components that aim to work out of the box, be accessible and deliver superior developer and user experience. Browse the new Wave Design System site and Wave React components docs at https://wave.volue.com.