Custom Icons

The Mavis theme utilizes Remixicon and custom FlatIcon icons to enhance the visual experience. You can manually use these icons by referencing the resources below.


1. Using Remixicon Icons

You can explore and use Remixicon icons from their official website:
🔗 Remixicon Website

Example Usage in HTML:

<i class="ri-home-line"></i> Home
<i class="ri-phone-fill"></i> Call Us
<i class="ri-heart-fill"></i> Favorite

2. Using Custom FlatIcon Icons

Below is a list of custom FlatIcon icons available in the Mavis theme. You can use these icons in your HTML by adding the corresponding class to an <i> tag.

Example Usage:

<i class="flaticon-down-arrow"></i>
<i class="flaticon-right-arrow"></i>
<i class="flaticon-search-interface-symbol"></i>

List of Available Icons:

Copy and paste the relevant class into your HTML.

<!-- Navigation & Arrows -->
<i class="flaticon-down-arrow"></i> flaticon-down-arrow
<i class="flaticon-right-arrow"></i> flaticon-right-arrow
<i class="flaticon-up-right-arrow"></i> flaticon-up-right-arrow
<i class="flaticon-chevron"></i> flaticon-chevron
<i class="flaticon-right"></i> flaticon-right

<!-- Medical & Healthcare -->
<i class="flaticon-doctor"></i> flaticon-doctor
<i class="flaticon-doctor-1"></i> flaticon-doctor-1
<i class="flaticon-stethoscope"></i> flaticon-stethoscope
<i class="flaticon-heart"></i> flaticon-heart
<i class="flaticon-mri"></i> flaticon-mri
<i class="flaticon-mental-health"></i> flaticon-mental-health
<i class="flaticon-old-woman"></i> flaticon-old-woman
<i class="flaticon-medical-team"></i> flaticon-medical-team
<i class="flaticon-medical-book"></i> flaticon-medical-book
<i class="flaticon-chronic-fatigue"></i> flaticon-chronic-fatigue
<i class="flaticon-tooth"></i> flaticon-tooth
<i class="flaticon-heart-beat"></i> flaticon-heart-beat

<!-- Communication & Contact -->
<i class="flaticon-call"></i> flaticon-call
<i class="flaticon-telephone"></i> flaticon-telephone
<i class="flaticon-envelope"></i> flaticon-envelope
<i class="flaticon-emergency-call"></i> flaticon-emergency-call

<!-- Calendar & Time -->
<i class="flaticon-calendar"></i> flaticon-calendar
<i class="flaticon-calendar-1"></i> flaticon-calendar-1
<i class="flaticon-calendar-2"></i> flaticon-calendar-2
<i class="flaticon-time"></i> flaticon-time
<i class="flaticon-appointment"></i> flaticon-appointment

<!-- Social Media -->
<i class="flaticon-facebook-app-symbol"></i> flaticon-facebook-app-symbol
<i class="flaticon-social"></i> flaticon-social
<i class="flaticon-twitter"></i> flaticon-twitter
<i class="flaticon-instagram"></i> flaticon-instagram

<!-- Miscellaneous -->
<i class="flaticon-search-interface-symbol"></i> flaticon-search-interface-symbol
<i class="flaticon-pin"></i> flaticon-pin
<i class="flaticon-award-symbol"></i> flaticon-award-symbol
<i class="flaticon-happiness"></i> flaticon-happiness
<i class="flaticon-right-quote"></i> flaticon-right-quote
<i class="flaticon-precision"></i> flaticon-precision
<i class="flaticon-consultation"></i> flaticon-consultation
<i class="flaticon-rehabilitation"></i> flaticon-rehabilitation
<i class="flaticon-correct"></i> flaticon-correct
<i class="flaticon-insurance"></i> flaticon-insurance
<i class="flaticon-plus"></i> flaticon-plus
<i class="flaticon-star"></i> flaticon-star
<i class="flaticon-play-button"></i> flaticon-play-button

Final Notes

  • Remixicon icons can be directly referenced using their class names.
  • FlatIcon icons are preloaded in the theme and can be used by adding the corresponding class.
  • You can customize the icons using CSS for size, spacing, and color adjustments.