# Icon
An icon is an inline svg consisting of a single color.
# Usage
Use the icon prop to choose the icon you want. This will correspond to an svg with the same name.
See the full list of icons on Github (opens new window).
<template>
<DemoGrid>
<div
v-for="icon in icons"
:key="icon"
class="ci-text-sm"
>
<ci-icon :icon="icon" />
<br>{{ icon }}
</div>
</DemoGrid>
</template>
<script>
export default {
data() {
return {
icons: [
'alarm-clock',
'alert-triangle',
'alert-triangle-outline',
'align-center',
'align-justify',
'align-left',
'align-right',
'arrow-back',
'arrow-curved-left',
'arrow-left',
'arrow-long-down',
'arrow-long-left',
'arrow-long-right',
'arrow-long-up',
'arrow-normal-down',
'arrow-normal-left',
'arrow-normal-right',
'arrow-normal-up',
'arrow-right',
'arrow-square-down',
'arrow-square-left',
'arrow-square-right',
'arrow-square-up',
'arrow-upload',
'asterisk',
'bell',
'bell-ringing',
'bell-slash',
'blockquote',
'bold',
'bolt',
'book',
'bookmark',
'browser-window',
'building',
'bullet-list',
'bullseye',
'calendar',
'calendar-check',
'calendar-clock',
'calendar-cross',
'calendar-days',
'calendar-minus',
'calendar-outline',
'calendar-pen',
'calendar-person',
'calendar-plus',
'calendar-star',
'calendar-team',
'calendar-user',
'camera',
'caret-down',
'caret-left',
'caret-right',
'caret-solid-down',
'caret-solid-left',
'caret-solid-right',
'caret-solid-up',
'caret-up',
'chart-area',
'chart-bars',
'chart-bullet',
'chart-columns',
'chart-gantt',
'chart-line',
'chart-mixed',
'chart-network',
'chart-pie',
'chart-scatter',
'chart-waterfall',
'check',
'checkmark-bold-outline',
'checkmark-outline',
'chevron-down-outline',
'chevron-left-outline',
'chevron-right-outline',
'chevron-up-outline',
'ci-logo',
'circle',
'circle-check',
'circle-i',
'clear-formatting',
'clipboard',
'clipboard-list',
'clock',
'clone',
'close-outline',
'code',
'collapse-outline',
'columns',
'comment',
'comment-dots',
'comments',
'copy',
'copyright',
'credit-card',
'cross',
'currency-dollar',
'currency-euro',
'currency-lira',
'currency-pound',
'currency-ruble',
'currency-rupee',
'currency-shekel',
'currency-tenge',
'currency-won',
'currency-yen',
'database',
'dollar-bill',
'download',
'drag',
'ellipsis-horizontal',
'ellipsis-vertical',
'email-outline',
'envelope-arrows',
'envelope-check',
'envelope-closed',
'envelope-letter',
'envelope-money',
'envelope-multiple',
'envelope-notification',
'envelope-open',
'envelope-plus',
'envelope-text',
'equal',
'exclamation',
'expand',
'expand-outline',
'external-link',
'eye',
'eye-off-2-outline',
'eye-outline',
'eye-slash',
'file',
'file-blank',
'file-chart',
'file-check',
'file-copy',
'file-csv',
'file-excel',
'file-export',
'file-image',
'file-pdf',
'file-pen',
'file-powerpoint',
'file-search',
'file-signature',
'file-text-outline',
'file-zip',
'filter',
'filter-slash',
'filter-triangle',
'finish',
'fire',
'flag',
'flash-outline',
'folder',
'folder-open',
'font-size',
'forward',
'frown',
'frown-large',
'funnel',
'gauge',
'globe-americas',
'greater-than',
'greater-than-or-equal',
'grid',
'grip-bars-horizontal',
'grip-bars-vertical',
'grip-dots-horizontal',
'grip-dots-vertical',
'heart',
'heart-outline',
'home',
'i-cursor',
'image',
'images',
'indent-less',
'indent-more',
'info',
'italic',
'italics',
'landmark',
'language',
'laptop',
'layer-group',
'less-than',
'less-than-or-equal',
'level-down',
'level-up',
'lightbulb',
'link',
'list-bullets',
'list-checks',
'list-numbered',
'location',
'location-arrow',
'location-pin',
'lock',
'lock-closed',
'lock-open',
'logout',
'logo-facebook',
'logo-instagram',
'logo-linkedin',
'logo-twitter-x',
'logo-youtube',
'logo-github',
'magnifying-glass',
'map-location',
'map-normal',
'medal',
'menu',
'microphone',
'microphone-slash',
'minus',
'minus-bold-outline',
'minus-circle',
'minus-outline',
'minus-square',
'mobile',
'money-bill',
'mouse',
'mouse-pointer',
'new-tab',
'not-equal',
'ordered-list',
'palette',
'paperclip',
'paper-plane',
'paper-plane-outline',
'paragraph',
'paste',
'pause',
'pen',
'pencil',
'people',
'people-group',
'percent',
'person',
'person-pencil',
'phone',
'phone-cross',
'phone-incoming',
'phone-missed',
'phone-normal',
'phone-outgoing',
'phone-plus',
'phone-slash',
'pin',
'pin-down',
'pin-left',
'play',
'plus',
'plus-outline',
'power',
'print',
'project-diagram',
'puzzle-piece',
'question-mark-outline',
'quotes',
'receipt',
'redo',
'registered',
'reply',
'reply-all',
'round-cross',
'round-exclamation',
'round-pause',
'round-play',
'round-plus',
'round-question',
'round-user',
'route',
'salesforce',
'save',
'search-location',
'search-minus',
'search-money',
'search-normal',
'search-outline',
'search-plus',
'settings',
'shapes',
'share',
'shield',
'shoe-prints',
'shopping-cart',
'shrink',
'sidebar',
'signal',
'signature',
'sign-in',
'sign-out',
'signpost',
'sitemap',
'slider-horizontal',
'slider-simple',
'sliders-vertical',
'slider-verticle',
'sort-1-9-down',
'sort-1-9-up',
'sort-alphanumeric-down',
'sort-alphanumeric-up',
'sort-a-z-down',
'sort-a-z-up',
'sort-down',
'spell-check',
'spinner',
'square',
'square-check',
'square-cross',
'square-plus',
'star',
'star-outline',
'sticky-note',
'stop',
'stop-circle',
'stopwatch',
'store',
'stream',
'strike',
'strikethrough',
'suitcase',
'sync',
'table',
'table-columns',
'tablet',
'tag',
'tags',
'task-list',
'text',
'text-color',
'thermometer-empty',
'thermometer-full',
'thermometer-half',
'thermometer-position-6',
'thermometer-position-7',
'thermometer-quarter',
'thermometer-three-quarters',
'three-dots',
'three-dots-horizontal',
'three-dots-large',
'thumbs-down',
'thumbs-up',
'toggle-off',
'toggle-on',
'trademark',
'trash',
'triangle-down',
'triangle-exclamation',
'trophy',
'underline',
'undo',
'unlink',
'upload',
'user',
'user-address-book',
'user-address-card',
'user-check',
'user-clock',
'user-cross',
'user-edit',
'user-lock',
'user-minus',
'user-normal',
'user-plus',
'user-settings',
'user-shield',
'user-slash',
'users-normal',
'user-square',
'users-settings',
'user-tag',
'user-unlock',
'user-upgrade',
'video',
'video-slash',
'wallet',
'wave',
'wave-double',
'wifi',
'window',
'window-maximize',
'window-mimimize',
'window-restore',
'wrench',
'x-lg',
'lifering',
'question-circle',
'code-square',
'sparkle'
]
}
}
}
</script>
# Naming Convention
Icons should follow a naming convention that is clear to all and helps us identify them. Semantic naming is problematic at scale, because icons with a semantic name often end up getting used outside of their originally intended purpose. For that reason, we have adopted this convention:
{ cricle / round / triangle }-{ descriptive-name }-{ modifier }-{size}
- Icons should be named based on what they look like
- If an icon is surrounded by a circular line, prefix it with
circle- - If an icon is contained in a solid circle, prefix it with
round- - If an icon is contained in a triangle, prefix it with
triangle- - If an icon comes in multiple size it, add a size suffix of
-sm,-mdor-lg - If an icon has modifiers, add a descriptive suffic
# 🚫 Don't
email
big-email
send
info
warning
back-arrow
# ✅ Do
envelope
envelope-lg
paper-airplane
circle-i
triangle-exclamation
arrow-back
← Form Field Iconbar →