The OpenVibe glyphs
Sort
A free sort icon in the OpenVibe hand, as SVG, PNG and a font. In place of Font Awesome’s fa-arrow-down-wide-short.
- Name
sort- Character
U+E100- Drawn
- Drawn for the set
- Licence
- MIT, free for any use
Every size by itself
Its lines grow a little heavier when small, so it stays clear; it has no solid drawing because it is made of lines.
Names and keywords
The names it answers to and the words people search with. sort is its registry name; it stands in for fa-arrow-down-wide-short.
Suggest one for a button
Type what the button says. The set’s names and keywords answer first; a small model orders the shortlist when the words are new. The API is GET /api/v1/glyphs/suggest?label=.
Make a PNG
Any size up to 1024 pixels at 1×, 2× or 3×, in any colour or the mark’s two, a lighter or heavier line, flat or with the mark’s depth and glow, room around it and a ground behind it. The link rebuilds the same file every time.
Use it
Every way is the same drawing, free to use with no sign-in. On an OpenVibe site the navbar already loads the drop-in, so Font Awesome’s markup shows it.
Any page
No sign-in. It follows the text’s size and colour, and turns solid when small.
<script src="https://openvibe.design/ov-icon.js" defer></script>
<ov-icon name="sort"></ov-icon>Inline SVG
HTML, Vue, Svelte, Solid, Angular.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 5.8h9.2M3.5 12h6.2M3.5 18.2h3M17.5 4.8v14.4M14.3 16.2l3 3l3-3"/></svg>React
export function SortIcon(props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}><path d="M3.5 5.8h9.2M3.5 12h6.2M3.5 18.2h3M17.5 4.8v14.4M14.3 16.2l3 3l3-3"/></svg>
);
}A link
https://openvibe.design/icons/sort.svg
https://openvibe.design/icons/sort.png?size=512&color=mark8 more ways Font Awesome markup · The font · The sprite · CSS, no markup · Data URI · ES module · Node · Android
Font Awesome markup
Keep your markup; the drop-in draws ours.
<script src="https://openvibe.design/shared/ov-glyphs.js" defer></script>
<i class="fa-solid fa-arrow-down-wide-short"></i>The font
<link rel="stylesheet" href="https://openvibe.design/shared/ov-glyphs-font.css">
<i class="ovi ovi-sort"></i>The sprite
<svg width="24" height="24"><use href="https://openvibe.design/shared/ov-glyphs.svg#ovg-sort"/></svg>CSS, no markup
A mask painted in the text’s colour: <span class="icon-sort"></span>. Or link it, with any others: <link rel="stylesheet" href="https://openvibe.design/icons.css?names=sort">; add is-solid for the solid drawing.
.icon-sort {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.8h9.2M3.5 12h6.2M3.5 18.2h3M17.5 4.8v14.4M14.3 16.2l3 3l3-3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.8h9.2M3.5 12h6.2M3.5 18.2h3M17.5 4.8v14.4M14.3 16.2l3 3l3-3'/%3E%3C/svg%3E") center / contain no-repeat;
}Data URI
For an <img> or a CSS url(), in a fixed colour.
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.8h9.2M3.5 12h6.2M3.5 18.2h3M17.5 4.8v14.4M14.3 16.2l3 3l3-3'/%3E%3C/svg%3EES module
import sort from 'https://openvibe.design/icons/sort.mjs';
// { name, line, solid }: the drawings, for a component of your ownNode
require('openvibe-shared/glyphs').svg('sort', { size: 24 })Android
A VectorDrawable: download the XML. iOS: Xcode takes the SVG as it is (keep “Preserve Vector Data” on).
<!-- res/drawable/ic_sort.xml -->
https://openvibe.design/icons/sort.xml
Make it move
One move when something happens: point at each, press it, or tap the first to draw it again. Nothing loops or spins, and calm or reduced motion stops them.
With <ov-icon>
<ov-icon name="sort" motion="pop"></ov-icon>On any SVG
<link rel="stylesheet" href="https://openvibe.design/icons/pack/ov-icon-motion.css">
<svg class="ovm-pop" …>…</svg>Near it
Glyphs that share a word with sort, then its neighbours. All 287.