Icons
Introduction
The collection of scalable vector icons is created to enhance designs and products with visually appealing and consistent graphics.
Scalability:
Icons are provided in SVG format, ensuring they can be scaled to any size without losing quality. Feel free to resize them according to the design requirements.
Color Customization:
Icons can be easily customized to match civica’s color palette. Developer can change colorcode in the codebase.
Accessibility:
When using icons in products or interfaces, ensure they maintain adequate contrast and are easily recognizable to all users.
Basic
Civica-icons use the ds {ds-icon} syntax such as ds ds-checkmark. A standalone icon can be displayed using an element such as i or span.
<i class="ds ds-checkmark"></i>
<i class="ds ds-calendar"></i>
<span class="ds ds-user"></span>
<span class="ds ds-house"></span>
Size
Size of an icon is controlled with the font-size classes such as icon-md, icon-lg and icon-xl.
<i class="ds ds-checkmark"></i>
<i class="ds ds-calendar icon-md"></i>
<span class="ds ds-user icon-lg"></span>
<span class="ds ds-house icon-xl"></span>
Color
Icon color is defined with the color classes which are text-primary, text-secondary, text-info, text-success, text-warning and text-danger.
<i class="ds ds-checkmark"></i>
<i class="ds ds-calendar text-warning"></i>
<span class="ds ds-user"></span>
<span class="ds ds-house text-success"></span>
Icons
Here is the full list of civica-icons. More icons will be added periodically and you may also request new icons by emailing us at support.firefly@civica.co.uk
ds-chevron-down
ds-chevron-up
ds-chevron-left
ds-chevron-double-left
ds-chevron-double-right
ds-chevron-right
ds-code
ds-bell
ds-mail
ds-calendar
ds-calendar-plus
ds-clock
ds-camera-video
ds-settings
ds-house
ds-user
ds-multi-user
ds-search
ds-bookmark
ds-copy
ds-arrow-clockwise
ds-star
ds-star-fill
ds-arrow-down-up
ds-sort-up
ds-sort-down
ds-filter
ds-filter-slash
ds-filter-fill
ds-pencil
ds-file
ds-file-pdf
ds-file-x
ds-document
ds-checkmark
ds-close
ds-close-circle
ds-minus
ds-plus
ds-info-circle
ds-exclamation-triangle
ds-unlock
ds-lock
ds-maximize
ds-minimize
ds-list
ds-bold
ds-italic
ds-underline
ds-list-ul
ds-list-ol
ds-text-left
ds-text-center
ds-text-right
ds-justify
ds-code-slash
ds-image
ds-link
ds-text-color
ds-remove-style
ds-google
ds-apple
ds-facebook
ds-microsoft
ds-civica-logo
ds-arrow-right
ds-arrow-left
ds-arrow-up
ds-arrow-down