Styling and animation

Colour, size, frames, rotation, animation and accessibility with the kit's utility classes.

as Markdown, for notes or an AI chat

Everything on this page works with the CDN stylesheet, the free kit and the Pro kit alike. The examples beside the code are drawn with the real classes.

Colour and size like text#

Icons follow color and font-size, so plain CSS styles them. Duotone's second tone has its own colour and opacity:

CSS

.toolbar .hti { color: #1766f2; font-size: 20px; }

.hti-duotone {
  --hti-secondary: #ffd23f;      /* the tone; defaults to currentColor */
  --hti-secondary-opacity: .45;  /* defaults to .2 */
}

With the CSS classes the tone is painted over the outline, so keep its opacity around .5 or lower for the outline to stay visible.

Utility classes#

Or style each icon with classes, Tailwind-style. Colours are the Tailwind palette (blue-500, slate-900…) plus navy, brand, ice, cream, black and white.

HTML

<i class="hti hti-duotone hti-folder hti-size-32 hti-text-blue-600 hti-secondary-amber-400 hti-tone-40" aria-hidden="true"></i>

<!-- A framed icon: the background goes on a wrapper -->
<span class="hti-box hti-size-48 hti-bg-navy hti-p-4 hti-rounded-22">
  <i class="hti hti-rocket hti-size-48 hti-text-white" aria-hidden="true"></i>
</span>

Classes	Does
`hti-size-8` … `hti-size-512`	Size in pixels, every whole number
`hti-text-{colour}`	Icon colour
`hti-secondary-{colour}`, `hti-tone-5` … `hti-tone-100`	Duotone tone colour and opacity (%)
`hti-box` `hti-bg-{colour}` `hti-p-0.5` … `hti-p-8` `hti-rounded-1` … `-50`	A framed plate (padding in grid units of 24, radius in %)
`hti-xs` `hti-sm` `hti-lg` `hti-xl` `hti-2x` … `hti-5x`	Sizes relative to the text
`hti-fw`	Fixed width, for aligned lists
`hti-rotate-15` … `hti-rotate-345`	Turns in 15° steps
`hti-flip-h` `hti-flip-v` `hti-flip-both`	Mirroring (combines with a turn)

A value outside these, such as hti-text-[#7c3f00], needs the helper script described on the CDN page.

Animation#

Add one animation class to a CSS icon, an inline SVG or an image. Animations keep any rotation and mirroring and stop when the visitor has asked for reduced motion.

HTML

<i class="hti hti-heart hti-beat" aria-hidden="true"></i>
<i class="hti hti-settings hti-spin" aria-hidden="true"></i>
<img class="hti-spin" src="/assets/hubtoolify-icons/svg/line/loader.svg" width="24" height="24" alt="">

Class	Motion
`hti-beat` `hti-beat-fade` `hti-fade`	Scale and opacity
`hti-bounce` `hti-flip` `hti-shake`	Bounce, turn over and shake
`hti-spin` `hti-spin-reverse` `hti-spin-pulse`	Continuous, reverse and stepped rotation

Tune any of them with custom properties:

CSS

.hti-beat {
  --hti-animation-duration: 1.5s;
  --hti-animation-delay: 0s;
  --hti-animation-iteration-count: infinite;
}

Accessibility#

Hide decorative icons from screen readers with aria-hidden="true". When an icon is the only content of a button or link, give the button a label:

HTML

<!-- Decorative: hide it -->
<p><i class="hti hti-check" aria-hidden="true"></i> Saved</p>

<!-- The only content of a button: label the button -->
<button type="button" aria-label="Search">
  <i class="hti hti-search" aria-hidden="true"></i>
</button>

Keep icons at least 16 px, and check contrast against the background as you would for text.