Install

npm install inticons

Usage

Import

CSS

@import url('inticons/fonts/inticons.bundle.min.css');

Vue

<script>
  import 'inticons/fonts/inticons.bundle.min.css';

  export default {
    // ...
  };
</script>

Component

Each icon can be referenced by their name prefixed with ii-. For example, You can get the arrow-right icon with using ii-arrow-right. You can use font-size and color properties to change the icon appearance.

<i class="ii ii-arrow-right"></i>

Helper Classes

Inticons contains many helper classes to quickly modify the look of the icons.

Rotate

• ii-rotate-45: Rotate icon 45 Degrees.
• ii-rotate-90: Rotate icon 90 Degrees.
• ii-rotate-135: Rotate icon 135 Degrees.
• ii-rotate-180: Rotate icon 180 Degrees.
• ii-rotate-225: Rotate icon 225 Degrees.
• ii-rotate-270: Rotate icon 270 Degrees.
• ii-rotate-315: Rotate icon 315 Degrees.

<i class="ii ii-arrow-right ii-rotate-45"></i>

Flip

• ii-flip-h: Flip icon horizontal.
• ii-flip-v: Flip icon vertical.

<i class="ii ii-arrow-right ii-flip-h"></i>

ii-rotate-* and ii-flip-* classes cannot be used on the same element at the same time.

Size

• ii-2x: Doubles the size.
• ii-3x: Triples the size.
• ii-4x: Quadraples the size.

<i class="ii ii-arrow-right ii-4x"></i>

Spin

• ii-spin: Spinning icon.

<i class="ii ii-arrow-right ii-spin"></i>

Weight

Some icons has ii-weight-600 class, which thicken the icon.

• ii-weight-600: Thicken the icon.

<i class="ii ii-arrow-right ii-weight-600"></i>

Contributor

👥 INTEGRATION Corp.

• garudanish
• HyungwonJang0327

📝 License

Inticons's code (all files, except fonts and svg icons) is distributed under MIT license. Embedded fonts and svg icons are distributed under UI8 primary licenses. See icons info on UI8 website for licensing agreement.