Skip to content
On this page

Icon

KIcon - Icon component for displaying SVG symbols. Currently Size, color and viewbox vary between icons, so the implementor must be mindful when using.

Dashboard
html
<KIcon icon="dashboard" />

Props

icon

The name of the icon. This required prop will only recognize icons from the following list. It tells KIcon which svg to render.

Down arrowDown
Back arrowLeft
Forward arrowRight
Up arrowUp
Back back
book
Bot bot
brain
Calendar calendar
check
Expand chevronDown
Back chevronLeft
Forward chevronRight
Collapse chevronUp
Clear clear
Copy to Clipboard clipboard
Close close
Settings cogwheel
Go to Beginning collapseExpand
Connections connections
contactSupport
Copy copy
Danger dangerCircle
Danger dangerCircleOutline
Dashboard dashboard
Decrease decrease
Dev Portal devPortal
Close disabled
Document document
Document documentList
Drag drag
Error errorFilled
Expand expand
External Link externalLink
featureRequest
File fileEmpty
JSON File fileJson
Markdown File fileMd
YAML File fileYaml
Filter filter
Flag flag
forbidden
Forward forward
Gateway gateway
Settings gear
Settings gearFilled
Graduation Hat graduationHat
Grid View grid
Hand Clock handClock
Help help
image
Immunity immunity
Increase increase
Information info
Kong kong
List View list
Locked lock
More Actions more
More moreHorizontal
No Data noData
Notifications notificationBell
Notifications notificationInbox
Organization organization
Organization organizations
Edit pencil
Organization people
plug
Add plus
Dev Portal portal
Presentation presentation
Profile profile
Redo redo
Runtimes runtimes
Search search
Security security
Document serviceDocument
ServiceHub serviceHub
Services services
Shared Config sharedConfig
Loading spinner
stackedCards
Support support
Table table
Team team
Team Member teamMember
Delete trash
Vitals vitals
Vitals vitalsChart
Warning warning
Workspaces workspaces
workspacesCollapsed
 

State icons

The state-prefixed icons shown below are styled differently than our normal icons listed above and are meant to be used inside instances of KEmptyState where they appear larger in the UI.

NOTE

The State icons do not support the color prop.

State Configure stateConfigure
State Gruceo stateGruceo
State No Data stateNoData
State No Search Results stateNoSearchResults
State Upload stateUpload
 

size

This prop takes a string that will replace the SVG default height and width. If height and width is not present by default 24 is applied.

Settings
html
<KIcon icon="gear" size="50" />

color

Overrides the default svg color.

List View
html
<KIcon icon="list" color="red" />

secondaryColor

Overrides the secondary svg color (if one exists).

Warning
html
<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />

NOTE

Some SVGs have a set fill-opacity and these cannot be overridden and will render at whichever percent opacity of the passed color.

Prevent color override in an SVG by setting the attribute id="preserveColor" within the SVG. e.g. <path id="preserveColor" d="M9 11v2H7v-2h2zm0-8v6.5H7V3h2z" fill="#FFF"/>

title

The title to be announced by screenreaders and displayed on hover. If not provided, a default title will be used.

Warning Warning
html
<KIcon icon="warning" />
<KIcon icon="warning" title="Custom Title" />

hideTitle

Remove the <title> element from within the KIcon svg element. Set to true to prevent the title text from appearing in the browser on svg hover, defaults to false.

viewBox

This prop takes a formatted string that will replace the SVG default viewBox. If one is not present by default 0 0 24 24 is applied. You can read more about the viewBox attribute here

  • viewBox
Settings
html
<KIcon icon="cogwheel" viewBox="0 0 16 16" />

Slots

  • svgElements - Used to add svg customization elements
Search Settings
html
<KIcon icon="check" size="50" color="url('#linear-gradient')">
  <template v-slot:svgElements>
    <defs>
      <linearGradient id="linear-gradient" x1="0" x2="1">
        <stop offset="0%" stop-color="#16BDCC" />
        <stop offset="30%" stop-color="#16BDCC" />
        <stop offset="100%" stop-color="#1BC263" />
      </linearGradient>
    </defs>
  </template>
</KIcon>

<KIcon icon="search" size="50" color="url('#linear-gradient2')">
  <template v-slot:svgElements>
    <defs>
      <linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
        <stop offset="10%"  stop-color="gold" />
        <stop offset="90%" stop-color="red" />
      </linearGradient>
    </defs>
  </template>
</KIcon>

<KIcon icon="cogwheel" size="50" color="dark-grey">
  <template v-slot:svgElements>
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 0 0"
      to="360 0 0"
      dur="5s"
      repeatCount="indefinite"
    />
  </template>
</KIcon>

Usage

WARNING

KIcon imports .svg file types directly, so a loader is needed in order to render in your application such as the webpack raw-loader

Check out the contributing docs to learn about adding new icons to KIcon.

Released under the Apache-2.0 License.